Иногда сделать слайдер проще самому, чем искать где то готовый. В этом нет ничего сложного и сегодня вы сами в этом убедитесь.
Задача:
Сделать простой слайдер с изображениями, который может отображать в одном слайде несколько изображений.
Решение:
Для начала пишем html код:
<div id="wrapper"> <div class="main"> <div class="sk-header-slide"> <img src="img/p1.jpg" /> </div> <div class="sk-header-slide"> <img src="img/p2.jpg" /> </div> <div class="sk-header-slide"> <img src="img/p3.jpg" /> </div> <div class="sk-header-slide"> <img src="img/p4.jpg" /> </div> <div class="sk-header-slide"> <img src="img/p5.jpg" /> </div> <div class="sk-header-slide"> <img src="img/p6.jpg" /> </div> <div class="sk-header-slide"> <img src="img/p7.jpg" /> </div> <div class="sk-header-slide"> <img src="img/p8.jpg" /> </div> <div class="sk-header-slide"> <img src="img/p9.jpg" /> </div> <div class="z1"></div> <div class="z2"></div> </div> </div>
После чего пропишем стили для нашего слайдера:
<style> .sk-header-slide{ -webkit-transition: 0.7s; -moz-transition:0.7s; -o-transition: 0.7s; transition: 0.7s; width: 239px; display: block; float: left; margin-left: 0; } .main{ display:block; width:740px; } #wrapper{ overflow:hidden; height: 473px; } .z1 { display: block; margin-right: 170px; margin-top: 175px; padding: 10px 15px; right: 0; position: absolute; z-index: 111; font-size: 25px; font-weight: bold; border-radius: 100%; background: #bba8d5; text-align: center; color: #fff; cursor: pointer; -webkit-transition: 0.5s; -moz-transition:0.5s; -o-transition: 0.5s; transition: 0.5s; } .z2 { display: block; margin-left: 20px; margin-top: 175px; padding: 10px 15px; position: absolute; z-index: 111; font-size: 25px; font-weight: bold; border-radius: 100%; background: #bba8d5; text-align: center; color: #fff; cursor: pointer; -webkit-transition: 0.5s; -moz-transition:0.5s; -o-transition: 0.5s; transition: 0.5s; } </style>
Скрипт слайдера:
<script> $(document).ready(function(){ var zz; var d = 0; var koichest = 1; // количество элементов в одном слайде var koichest2 = koichest; // количество элементов в одном слайде var wmain = 740; // ширина main var wslide = 239; //ширина элемента var wwrapper = wslide*koichest; $("#wrapper").css("width", wwrapper+"px"); var elem = $('.sk-header-slide').length; var numb = elem; elem = elem/koichest; var welem = wmain*elem; elem = Math.round(elem); welem = $(".main").css("width", welem+"px"); $(".z1").click(function () { if(koichest!=numb){ koichest = koichest+1; if(!zz){ zz=0; } zz = zz-wslide; $(".sk-header-slide:eq("+d+")").css("marginLeft", "-"+wslide+"px"); for(var i = 0; i > zz; i=i+zz){ d++; } } }); $(".z2").click(function () { if(koichest!=koichest2){ koichest = koichest-1; if(zz!=0){ for (var i = 0; i > zz; i=i+zz) { d = d-1; } zz = zz+wslide; $(".sk-header-slide:eq("+d+")").css("marginLeft", "0px"); } } }); }); </script>
Разберем подробнее этот скрипт.
В строчке "var koichest = 1;" указывается колличество картинок или каких других элементов в одном слайде.
В строчке "var wmain = 740;" указывается ширина блока div с классом main.
В строчке "var wslide = 239;" указывается ширина одного элемента, в нашем случае это блок div с классом sk-header-slide.