Home > Tips

CSS3 Image Slider - A Creative Accordion CSS3 Image Slider Free Download

 

 

Accordion Slider (One of the slider types, click the [View the demo] link to see what it looks like) can be only created by jQuery or some other js script. However, with the development of CSS3, we can create an exceptional accordion slider without using jQuery or some other js script.

Today, wed like show you a creative accordion CSS3 image slider, you can free download the CSS3 image slider and then edit it for your own use. Whats more, we will also show you the HTML and CSS structure of the CSS3 image slider in case you want to learn how to create this kind of CSS3 image slider.

Below is the accordion CSS3 image slider example, please click the [View the demo] link to preview the demo or you can click the [Download the demo] link to free download the CSS3 image slider directly.

                                                                                       [View the demo]                 [Download the demo] 



 The HTML Structure of the CSS3 Image Slider

 <ul class='main_promo clearfix' id='main_promo'>
<li>
<input type='radio' name='radio-set' checked=''/>
<div class='slide'>
<a href='#'><p>Slide One</p><strong>1</strong></a>
</div>
<div class='slide_img'>
<img src='img/img_01.jpg' alt='' />
</div>
</li>
<li>
<input type='radio' name='radio-set' />
<div class='slide'>
<a href='#slide_two'><p>Slide Two</p><strong>2</strong></a>
</div>
<div class='slide_img'>
<img src='img/img_02.jpg' alt='' />
</div>
</li>
<li>
<input type='radio' name='radio-set' />
<div class='slide'>
<a href='#slide_three'><p>Slide Three</p><strong>3</strong></a>
</div>
<div class='slide_img'>
<img src='img/img_03.jpg' alt='' />
</div>
</li>
<li>
<input type='radio' name='radio-set' />
<div class='slide'>
<a href='#slide_four'><p>Slide Four</p><strong>4</strong></a>
</div>
<div class='slide_img'>
<img src='img/img_04.jpg' alt='' />
</div>
</li>
</ul>


 

 CSS Structure of the CSS3 Image Slider

body {
background-color: #f6f6f6;
}
.demo {
width: 940px;
margin: 40px auto 0;
}
.main_promo {
border: 5px solid #3d3d3d;
border-radius: 7px;
box-shadow: 0 8px 16px rgba(0,0,0,.2);
background-color: #1c1c1c;
}
.main_promo li {
position: relative;
float: left;
padding: 5px 0 5px 6px;
overflow: hidden;
}
.main_promo div {
float: left;
}

.slide a {
position: relative;
z-index: 1;
display: block;
outline:none;
width: 50px;
height: 300px;
border-radius: 5px;
background-color: #303030;
transition: all 0.3s ease-in;
}
.slide p {
position: absolute;
top: 30px;
left: -25px;
color: #ddd;
height:20px;
width: 100px;
font-size: 14px;
font-weight: bold;
text-shadow: 0 1px 1px rgba(0,0,0,.8);
word-break:break-all;
transform: rotate(-90deg);
}
.slide strong {
font-size: 30px;
color: #191919;
text-shadow: 0 1px 0 #454545;
position: absolute;
bottom: 15px;
left: 15px;
}
.slide_img {
overflow: hidden;
width: 0;
height: 0;
transition: width 0.5s ease-in-out;
}
.slide_img img {
width: 692px;
height: 300px;
}
input[type='radio'] {
position: absolute;
left: 5px;
z-index: 99;
width: 50px;
height: 300px;
opacity: 0;
cursor: pointer;
}
input:checked ~ .slide a {
text-decoration: none;
background:radial-gradient(circle,#434343,#303030);
}
input:checked ~ .slide_img {
overflow: visible;
width:692px;
height:300px;
margin-left: 8px;
}



 Contact Us for Help 

It is our goal and duty to give our users the best products, the best services and the best web design resources. However, we are human so we will surely make some mistakes. If you have problem downloading or editing the CSS3 image slider demo, please feel free to contact our technical support team: support@slicemaker.com.

We really appreciate your kind suggestions and we really want to hear from you.



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0