I am currently working with a client on the website . One of the features on the site is a slider at the top that allows for image swapping using pure CSS. However, the client recently requested that the images change when hovering over radio buttons or automatically start sliding through.
From what I know, achieving this without jQuery seems difficult, as we have been trying to avoid it. But I'm open to suggestions and ideas from anyone willing to share. Before giving up hope entirely, I thought I would reach out to see if there are any solutions out there. If you happen to have a quick jQuery fix, I am all ears and willing to consider it.
Here is the HTML code for the Slider:
<div id="slider">
<ul class="slider">
<li>
<input type="radio" id="slide1" name="slide" checked>
<a href="#"><label for="slide1"></label></a>
<img src="/images/Slide1.png" />
</li>
<li>
<input type="radio" id="slide2" name="slide">
<a href="#"><label for="slide2"></label></a>
<img src="/images/Slide2.png" />
</li>
<li>
<input type="radio" id="slide3" name="slide">
<a href="#"><label for="slide3"></label></a>
<img src="/images/Slide3.png" />
</li>
<li>
<input type="radio" id="slide4" name="slide">
<a href="#"><label for="slide4"></label></a>
<img src="/images/Slide4.png" id="slide4img" />
</li>
</ul>
</div>
Below is the CSS code for the slider:
/*CSS Code for the Slider*/
#slider {
bottom:2%;
left: -4%;
margin: 0 auto;
position: relative;
top:65px;
z-index: 15;
}
.slider. {
-webkit-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
height:580;
width: 1020px;
}
.slider li {
-webkit-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
list-style: none;
position:absolute;
}
.slider img {
-webkit-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
margin: 0 auto;
height:580;
width:1020px;
vertical-align: top;
}
.slider input {
display: none;
}
.slider label {
background-color:#69d2e7;
bottom: 8px;
cursor: pointer;
display: block;
height: 20px;
position:absolute;
width: 20px;
border-radius: 10px;
z-index: 10;
-webkit-transition: background-color 0.15s ease-in-out;
-moz-transition: background-color 0.15s ease-in-out;
-o-transition: background-color 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out;
}
.slider li a:hover label {
background-color: #297cab;
}
.slider li a:hover label:after {
background-color: #297cab;
}
.slider li:nth-child(1) label {
margin-bottom: 1.1%;
left: 40%;
}
.slider li:nth-child(2) label {
margin-bottom: 1%;
left: 45%;
}
.slider li:nth-child(3) label {
margin-bottom: 1%;
left: 50%;
}
.slider li:nth-child(4) label {
margin-bottom: 1%;
left: 55%;
}
.slider img {
opacity: 0;
visibility: hidden;
}
.slider li input:checked ~ img {
opacity: 1;
visibility: visible;
z-index: 10;
}