Create a CSS image slider with a border around the images and two navigation buttons using z-index

I am looking to design an image slider with a border around the images and transitioning effects similar to the provided screenshot.

Here is my HTML code:

<div id="slideshow"><span class="control" 
        id="leftControl" style="display: none;">Move left</span> 
    <span class="control" id="leftControl"></span>
    <div id="slidesContainer" style="overflow: hidden;">
        <div id="slideInner" style="width: 3060px;">
            <div class="slide" style="float: left; width: 1020px;">
                <img src="/images/daf.png">
            </div>
            <div class="slide" style="float: left; width: 1020px;">
                <img src="/images/daf.png">
            </div>
            <div class="slide" style="float: left; width: 1020px;">
                3
            </div>
        </div>
    </div>
    <span class="control" id="rightControl"></span> 
    <div class="shadow_and_circles">
        <div class="sl1">
        </div>
        <div class="sl2">
        </div>
        <div class="sl1">
        </div>
    </div>
    <span class="control" id="rightControl">Move right</span>
</div>

You can view the CSS on my fiddle. After implementing these styles, my current result resembles this

What did I do wrong? I have adjusted the z-index, but what other steps should I take?

Update

I have now created a new fiddle

htmlcssimage

Answer №1

As mentioned in my reply, the styling on your page is a bit chaotic with a mix of inline CSS and linked classes. Additionally, there's no necessity for all containers to be in an absolutely positioned.

Take a look at your demo. Does this match what you were hoping to achieve?

__________UPDATE_______________

It appears that there may be some complications with the z-index values, so I have created a demo without utilizing any stack positioning. You can simply apply the provided classes from the following demonstration.

Demo excluding z-index.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm having trouble getting my jQuery click handler to work

Here is the HTML content within my Sharepoint 2010 Web Part project: <html> <h1>Travel Form Assistance</h1> <div id="preTravel" name="preTravel"> <h2>Pre Travel</h2> <img id="imgPreTravel" name="imgPreTra ...

jqueryhtmlcsssharepoint-2010

Exploring the realm of external variables and scoping within a jQuery function

I am facing an issue with the following code, where I want to execute test() every time the window is resized. var i = 0; var test = (function() { console.log(i++); })(); $(window).resize(function() { test(); }); Code: http://jsfiddle.net/qhoc/N ...

javascriptjqueryhtml

Basic Timer with Visual Background

Struggling to find the right CSS/script for a straightforward countdown timer, Here are the requirements: Countdown in days only, no need for hours, minutes, and seconds Ability to use a custom image as background I've scoured online searches but n ...

javascriptcss

Determine the overall price of the items in the shopping cart and automatically show it at the bottom without the need for manual entry

Creating a checkout form that displays the total cost of products, subtotal, GST cost, delivery cost, and overall price. The goal is to calculate the total by adding together the costs of all products with the "price" class (may need ids) at a 15% increase ...

javascripthtmlcssvisual-studiofunction

The ng-click functionality seems to be malfunctioning when used within the controller in conjunction with ng-bind

After coding, I noticed that my ng-click function is not working. When I inspected the element, I couldn't find ng-click displayed anywhere. Can someone please help me figure out what I'm doing wrong? var app = angular.module('myApp' ...

javascriptangularjshtmlangularjs-controllerng-bind-html

Issue with PrestaShop not displaying page content after adding jQuery

After updating to the latest version of Presta Shop, I encountered an issue. When I inserted the following code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> jQuery(document).ready(function(){ ...

jqueryhtmlprestashop

What could be the reason for the ineffective application of the padding attribute on my button?

Just a heads up, I've been attempting to customize the appearance of my HTML document through my JavaScript file. Specifically, I am currently using a forEach loop to style my buttons, but for some reason, they remain positioned right beside each othe ...

javascripthtmlcss

How can I use Python Selenium to replicate the styles of elements in Chrome?

Looking at this image, we can manually extract styles using copy > copy styles from Chrome. But is there a way to achieve this using Selenium? https://i.sstatic.net/3XzsT.png Although this guide explains how to obtain the CSS value of a specific eleme ...

pythoncssseleniumgoogle-chrome-extensiongoogle-chrome-devtools

Click on a thumbnail to open the gallery

I am currently working on implementing a feature that will allow a gallery to open when a thumbnail is clicked. At the moment, the code I have looks like this: <div class="row"> <div class="col-lg-12"> <h1 class="page-h ...

javascriptjqueryhtmlcsstwitter-bootstrap

Retrieve a specific child element by clicking on a custom control on the map

I have a container element with three child spans. Using JQuery, I can determine which child was clicked when the container is clicked by utilizing the following function: $('.unitContainer').on('click','span',function(){ ...

javascriptjqueryhtmlgoogle-maps-api-3addeventlistener

Resizing Images with Bootstrap

While working with twitter bootstrap 2.2.2, I have noticed that the image in the "hero" div resizes correctly when the page loads initially. However, it then unexpectedly expands beyond the div boundaries and gets cut off. You can view the page here: It ...

jqueryhtmltwitter-bootstrap

Simple Servlet Program

//VoterServlet.java package com.nt.servlet; import javax.servlet.*; import javax.servlet.http.*; import java.io.*; public class VoterServlet extends HttpServlet { public void doPost(HttpServletRequest req,HttpServletResponse res)throws S ...

html

Rearrange the order of the next button to appear after the dropdown instead of the

When a button is clicked, the paragraph area should display while pushing down the next button/div and the rest of the page below it. In simpler terms, clicking on the button reveals the box without overlapping other elements. I apologize for any language ...

javascripthtmlcss

Tips for aligning an image vertically

I'm struggling to vertically align an image within a div, no matter what I try it just won't cooperate. The goal is to center it within a material design lite cell. Take a look at my code: CodePen HTML: <div class="mdl-grid"> <div ...

htmlcssmaterial-design-lite

Different ways to modify the underline and label color in Material-UI's <Select/> component

A while ago, I came across this useful demo that helped me change the colors of input fields. Here is the link: https://stackblitz.com/edit/material-ui-custom-outline-color Now, I'm on a quest to find a similar demo for customizing the color of selec ...

javascriptcssreactjsmaterial-ui

Is there a way to showcase the output of the <div id="height"> on the height of the rectangle?

My Current Project Currently, I am in the process of developing a picture framing calculator using a combination of HTML, CSS, and JavaScript. Functionality of the Calculator For this calculator, users will input values such as: Frame Width (wf): 16 ...

javascripthtmljquerycss

Is there a way to ensure that the fixed modal remains at the forefront and that its top stays in view even as the user scrolls?

Can you assist me in simplifying this code? import { LoginProps } from '@/layouts/layout.props'; import { Box, Button, Divider, Flex, FormControl, FormLabel, Heading, HStack, IconButton, Input, Link, Stack, Text, } from ...

cssnext.jstailwind-csscss-positionchakra-ui

Restrictions on webpage components within code

Is there a maximum limit to the number of HTML elements that a webpage can load on a browser without including CSS or scripts? ...

htmlcssbrowser

What methods can be used to beautify Html 5 files in Java or Groovy?

Is it possible to pretty-print HTML5 files using libraries in Java or Groovy? While I know there are classes available for pretty-printing XML in Groovy, it won't work for HTML5 since it's not necessarily well-formed. Are there any solutions spec ...

javahtmlgroovypretty-print

CSS code preventing hyperlink from functioning

My website is almost complete, but I'm running into an issue with some hyperlinks on my event registration page. The first link works fine, but the second one does not. To troubleshoot, I created a test page with just the two links and still encounter ...

htmlasp.netcss