Accordion Slayt(Slider) Oluşturma Harika Tasarım

Accordion Slayt(Slider) Oluşturma Harika Tasarım



HTML TARAFI 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<div class="accordian1">
    <ul>
  <li>
   <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDg_eUzY0La-p8tS_PV5PiQVkzUPr7QTmdqaT2GnsdhPWOubAfdk-z1ZUY8EKI1gXFiAdVRD_Gs-wCtyKInMWyIokdVdCaeyw1dnm32E9cqrWhjuHFR2_K3j1Mt3FT3tcM24wXvgLrKHA/s1600/Ford-Focus_RS-2016-1024-01.jpg"/>
   </a>
  </li>
   <li>
   <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDg_eUzY0La-p8tS_PV5PiQVkzUPr7QTmdqaT2GnsdhPWOubAfdk-z1ZUY8EKI1gXFiAdVRD_Gs-wCtyKInMWyIokdVdCaeyw1dnm32E9cqrWhjuHFR2_K3j1Mt3FT3tcM24wXvgLrKHA/s1600/Ford-Focus_RS-2016-1024-01.jpg"/>
   </a>
  </li>
   <li>
   <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDg_eUzY0La-p8tS_PV5PiQVkzUPr7QTmdqaT2GnsdhPWOubAfdk-z1ZUY8EKI1gXFiAdVRD_Gs-wCtyKInMWyIokdVdCaeyw1dnm32E9cqrWhjuHFR2_K3j1Mt3FT3tcM24wXvgLrKHA/s1600/Ford-Focus_RS-2016-1024-01.jpg"/>
   </a>
  </li>
   <li>
   <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDg_eUzY0La-p8tS_PV5PiQVkzUPr7QTmdqaT2GnsdhPWOubAfdk-z1ZUY8EKI1gXFiAdVRD_Gs-wCtyKInMWyIokdVdCaeyw1dnm32E9cqrWhjuHFR2_K3j1Mt3FT3tcM24wXvgLrKHA/s1600/Ford-Focus_RS-2016-1024-01.jpg"/>
   </a>
  </li>
   <li>
   <a href="#">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDg_eUzY0La-p8tS_PV5PiQVkzUPr7QTmdqaT2GnsdhPWOubAfdk-z1ZUY8EKI1gXFiAdVRD_Gs-wCtyKInMWyIokdVdCaeyw1dnm32E9cqrWhjuHFR2_K3j1Mt3FT3tcM24wXvgLrKHA/s1600/Ford-Focus_RS-2016-1024-01.jpg"/>
   </a>
  </li>
   <li>
   <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDg_eUzY0La-p8tS_PV5PiQVkzUPr7QTmdqaT2GnsdhPWOubAfdk-z1ZUY8EKI1gXFiAdVRD_Gs-wCtyKInMWyIokdVdCaeyw1dnm32E9cqrWhjuHFR2_K3j1Mt3FT3tcM24wXvgLrKHA/s1600/Ford-Focus_RS-2016-1024-01.jpg"/>
   </a>
  </li>
   <li>
   <a href="#">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDg_eUzY0La-p8tS_PV5PiQVkzUPr7QTmdqaT2GnsdhPWOubAfdk-z1ZUY8EKI1gXFiAdVRD_Gs-wCtyKInMWyIokdVdCaeyw1dnm32E9cqrWhjuHFR2_K3j1Mt3FT3tcM24wXvgLrKHA/s1600/Ford-Focus_RS-2016-1024-01.jpg"/>
   </a>
  </li>
  <li>
   <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDg_eUzY0La-p8tS_PV5PiQVkzUPr7QTmdqaT2GnsdhPWOubAfdk-z1ZUY8EKI1gXFiAdVRD_Gs-wCtyKInMWyIokdVdCaeyw1dnm32E9cqrWhjuHFR2_K3j1Mt3FT3tcM24wXvgLrKHA/s1600/Ford-Focus_RS-2016-1024-01.jpg"/>
   </a>
  </li>
  <li>
   <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDg_eUzY0La-p8tS_PV5PiQVkzUPr7QTmdqaT2GnsdhPWOubAfdk-z1ZUY8EKI1gXFiAdVRD_Gs-wCtyKInMWyIokdVdCaeyw1dnm32E9cqrWhjuHFR2_K3j1Mt3FT3tcM24wXvgLrKHA/s1600/Ford-Focus_RS-2016-1024-01.jpg"/>
   </a>
  </li>
  <li>
   <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDg_eUzY0La-p8tS_PV5PiQVkzUPr7QTmdqaT2GnsdhPWOubAfdk-z1ZUY8EKI1gXFiAdVRD_Gs-wCtyKInMWyIokdVdCaeyw1dnm32E9cqrWhjuHFR2_K3j1Mt3FT3tcM24wXvgLrKHA/s1600/Ford-Focus_RS-2016-1024-01.jpg"/>
   </a>
  </li>
   <li>
   <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDg_eUzY0La-p8tS_PV5PiQVkzUPr7QTmdqaT2GnsdhPWOubAfdk-z1ZUY8EKI1gXFiAdVRD_Gs-wCtyKInMWyIokdVdCaeyw1dnm32E9cqrWhjuHFR2_K3j1Mt3FT3tcM24wXvgLrKHA/s1600/Ford-Focus_RS-2016-1024-01.jpg"/>
   </a>
  </li>
   <li>
   <a href="#">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDg_eUzY0La-p8tS_PV5PiQVkzUPr7QTmdqaT2GnsdhPWOubAfdk-z1ZUY8EKI1gXFiAdVRD_Gs-wCtyKInMWyIokdVdCaeyw1dnm32E9cqrWhjuHFR2_K3j1Mt3FT3tcM24wXvgLrKHA/s1600/Ford-Focus_RS-2016-1024-01.jpg"/>
   </a>
  </li>
 
 
 </ul>
</div>



CSS TARAFI
.accordian1 {
  
 width: 1140px; height: 150px;
 overflow: hidden;
 
 /*Time for some styling*/
 margin: 100px auto;
 box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*A small hack to prevent flickering on some browsers*/
.accordian1 ul {
    margin: 0; 
 padding: 0;
 width: 1200px;
 /*This will give ample space to the last item to move
 instead of falling down/flickering during hovers.*/
}

.accordian1 li {
 position: relative;
 display: block;
 width: 200px;
 float: left;
 
 border-left: 1px solid #888;
 
 box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 
 /*Transitions to give animation effect*/
 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 /*If you hover on the images now you should be able to 
 see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian1 ul:hover li {width: 95px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian1 ul li:hover {width: 200px;}


.accordian1 li img {
 display: block;
}