» »

Стильный слайдер Dsatyn в блок для сайта


Думаю сейчас очень трудно представить сайт без слайдера, и здесь как раз предоставлена версия JQuery слайдера. Который вы можете установить на свой ресурс в любой блок по правой или левой стороне. Его плюсы в том, что он будет занимать немного места, а вот информация выдавать много будет. Что по самой тематике, здесь думаю ближе подойдет кино онлайн, но не исключаю онлайн магазины, можно также товар показывать.

Состоит он из одного корпуса и двух прозрачных кнопок, где вы можете перематывать в любую сторону. По гамме цвета сделан так, что подойдет как на темный или светлый интернет ресурс. Если вы установите больше по размеру изображение или картинку, то здесь все будет смотреться корректно, так как стили ужмут или наоборот расширят и подведут под те значение, которые требуются.

Установка:

Для начало ищем место, где будем ставить этот код:

Код
<div class="slider-box">
<div class="slider">  
<a href="http://zornet.ru/"><img src="http://zornet.ru/_ld/2/87221870.png" alt=""></a>
<a href="#"><img src="http://zornet.ru/_ld/2/29123386.jpg" alt=""></a>
<a href="#"><img src="http://zornet.ru/_ld/2/43981783.png" alt=""></a>
<a href="#"><img src="http://zornet.ru/_ld/2/72977494.png" alt=""></a>
<a href="#"><img src="http://zornet.ru/_ld/2/43981783.png" alt=""></a>
</div>
<div class="prev"></div>
<div class="next"></div>
</div>


Потом ниже ставим скрипт:

Код
<script>
$(function() {  
  var slider = $('.slider'),
  sliderContent = slider.html(),  
  slideWidth = $('.slider-box').outerWidth(),  
  slideCount = $('.slider img').length,  
  prev = $('.slider-box .prev'),  
  next = $('.slider-box .next'),  
  sliderInterval = 7500,  
  animateTime = 1000,  
  course = 1,  
  margin = - slideWidth;  

  $('.slider img:last').clone().prependTo('.slider');
  $('.slider img').eq(1).clone().appendTo('.slider');
  $('.slider').css('margin-left', -slideWidth);  

  function nextSlide(){  
  interval = window.setInterval(animate, sliderInterval);
  }

  function animate(){
  if (margin==-slideCount*slideWidth-slideWidth){  
  slider.css({'marginLeft':-slideWidth});  
  margin=-slideWidth*2;
  }else if(margin==0 && course==-1){  
  slider.css({'marginLeft':-slideWidth*slideCount});
  margin=-slideWidth*slideCount+slideWidth;
  }else{  
  margin = margin - slideWidth*(course);  
  }
  slider.animate({'marginLeft':margin},animateTime);
  }

  function sliderStop(){  
  window.clearInterval(interval);
  }

  prev.click(function() {  
  if (slider.is(':animated')) { return false; }  
  var course2 = course;  
  course = -1;  
  animate();  
  course = course2 ;  
  });
  next.click(function() {  
  if (slider.is(':animated')) { return false; }  
  var course2 = course;  
  course = 1;  
  animate();  
  course = course2 ;  
  });

  slider.add(next).add(prev).hover(function() {  
  sliderStop();  
  }, nextSlide);  

  nextSlide();  
});
</script>


И остается установить стили в CSS, где вы еще можете вывести оттенок цвета.

Код
.slider-box{
  position:relative;
  width:320px;
  height:435px;
  overflow:hidden;
}
.slider{
  position:relative;
  width:10000px;
  height:435px;
}
.slider img{
  float:left;
  width:320px;
  height:435px;
}
.slider-box .prev, .slider-box .next{
  position:absolute;
  top:200px;
  display:block;
  width:29px;
  height:29px;
  cursor:pointer;
}
.slider-box .prev{
  left:10px;
  background:url(http://zornet.ru/Ajaxoskrip/Aster/slider_controls.png) no-repeat 0 0;
}
.slider-box .next{
  right:10px;
  background:url(http://zornet.ru/Ajaxoskrip/Aster/slider_controls.png) no-repeat -29px 0;
}


Также можете поставить в style эти стили и можно не ставить из в CSS, но здесь каждый сам видеть как делать.
20.08.2016 Просмотров: 428 Комментарий: (28)

Поделиться в социальных сетях

Материал разместил

Комментарий: 28
FeStemBer
FeStemBer 20.08.2016 23:331
0
Что то слайдеры пошли, но они всегда были нужны, а этот еще под блок можно поставить, и сколько хотите материалу в код установить.
tsakonter
tsakonter 20.08.2016 23:482
0
Согласен, что смотрится нормально, но на сайте он лучше смотреться будет, и это не только под кино онлайн все можно сделать. Просто сильно отличается от горизонтального, и выводить может хорошие кадры сайта.
Kosten
Kosten 20.08.2016 23:543
0
Не забывайте, что у каждого сайта своя ширина у контейнера, а значит у блока. Если широкая, то думаю намного красивее визуально смотреться будет, но и на стандартном, главное какой материал. Но и функциональность сайта поднимется, это точно.
ucozmental
ucozmental 21.08.2016 00:486
0
Так это понятно, там же не стоит в стилях avto, мне так кажется, что на слайдере вообще не делают, как на вертикальном меню.
feliksteg
feliksteg 21.08.2016 00:064
0
Здесь нужно добавить, если вы решили его меньше сделать или больше, то все в стилях настраивает.
Kosten
Kosten 21.08.2016 00:325
0
Мне кажется, кто ставить будет, он по коду догадается, что и менять потом нужно будет.

И еще, что самое большое устанавливать материала в слайдер, но где то 4 - 7 и хватит, чтоб сильно главную он не прессовал своим грузом.
Сафрон
Сафрон 21.08.2016 00:537
0
Но грузить все будет, нужно выбирать, если красиво, значит тяжело, если много функционально, значит также будет весить. Но некоторые фон сайта поставят и все перебивает, так что думаю на это сильно не нужно обращать внимание.
csretven
csretven 21.08.2016 00:588
0
А есть такие, чтоб только чисто на силях, или нужен скрипт обязательно, как мотор, от которого все и зависит.
Советник
Советник 21.08.2016 01:039
0
Не понимаю, для чего спрашивать, когда предыдущий слайдер на стилях, так посмотрите, они похоже, разве нет переключателей.
Сафрон
Сафрон 21.08.2016 01:1610
0
Но они вообще то похоже, только переключателей нет у одного, не знаю как все, но не когда не пользуюсь, но если там самим только администратором все проставлено, а он должен самое хорошее по идее ставить, то можно прокрутить. А так не когда на кино сайтах не прокручиваю.
Seyr
Seyr 27.08.2016 23:1211
0
Постеры в слайдере не отображаются!
Kosten
Kosten 27.08.2016 23:1512
0
Но это как понимаю с демо снято.
Seyr
Seyr 27.08.2016 23:3213
0
Это уже не важно, пользователям нужно чтобы работало..
Но так та мог бы стать не плохим слайдером для рекомендации новинок кино,
если бы работал.
Angerfist
Angerfist 28.08.2016 00:0914
0
Ссылку где не пашет слайдер, явно косяки в настройке, кстати я тут ещё как использовать на основе информера в комментах отписал
Форум
Kosten
Kosten 28.08.2016 00:1316
0
Как не важно, если он работает, если вы не правильно что то сделали, то лучше написать, чтоб разъяснили, а не сразу в лоб, не работает и все. Лично не понимаю такого подхода, чтоб все разрулить.
Angerfist
Angerfist 28.08.2016 00:1015
0
Ссылка на сайт где стоит именно этот слайдер в блоке
Seyr
Seyr 28.08.2016 00:3517
0
Без проблем вот ссылка на страницу, установлен ниже блока статистики Ссылка
Angerfist
Angerfist 28.08.2016 00:4518
0
Я не стал зажигать по всему исходнику, ты для теста рядом всё поставь: стили и js (потом раскидаешь)
Seyr
Seyr 28.08.2016 00:5020
0
Уже.
Angerfist
Angerfist 28.08.2016 00:5922
0
Не изобретай велосипед, подключай JS прямо в блоке рядом с хтмл слайдера и стили сделай встроенными пока не настроишь... оберни в style
и потом уже стили лучше в общее вынеси заккоментировав а не новый подключай
Angerfist
Angerfist 28.08.2016 00:5019
0
Просто я нихрена не нашёл ни JS ни стилей в общем CSS
Seyr
Seyr 28.08.2016 00:5521
0
Нечего сложного с строки 1329 до 1339.
Angerfist
Angerfist 28.08.2016 01:0223
0
и потом у тебя уже там скрипты, я когда тестировал были конфликты с вертикальным слайдером
Seyr
Seyr 28.08.2016 01:0525
0
Да я все слайдера на данной странице убирал тоже думал конфликт, но нет слайдера тут не причем.
И сейчас убраны смотри. Сам
Angerfist
Angerfist 28.08.2016 01:1227
0
Ща подожди, внимательнее посмотрю
Angerfist
Angerfist 28.08.2016 01:0424
0
В JS я не силён, поэтому убрав один js от слайдера заработал другой
Seyr
Seyr 28.08.2016 01:1126
0
Да ладно нечего, спасибо!
Angerfist
Angerfist 28.08.2016 01:2228
0
Короче я на тестовом проверил, работает только если подключаешь рядом встроенные стили и JS тоже... Вот так будет работать.

Код

<div class="slider-box">  
<div class="slider">  
<a href="/video/vip/1127"><img src="http://www.samunas.com/_vi/11/81308338.jpg" alt=""></a>  
<a href="/video/vip/1123"><img src="http://www.samunas.com/_vi/11/50119898.jpg" alt=""></a>  
<a href="/video/vip/1069"><img src="/_vi/11/13466090.jpg" alt=""></a>  
</div>  
<div class="prev"></div>  
<div class="next"></div>  
</div>

<script>
$(function() {  
  var slider = $('.slider'),
  sliderContent = slider.html(),  
  slideWidth = $('.slider-box').outerWidth(),  
  slideCount = $('.slider img').length,  
  prev = $('.slider-box .prev'),  
  next = $('.slider-box .next'),  
  sliderInterval = 7500,  
  animateTime = 1000,  
  course = 1,  
  margin = - slideWidth;  

  $('.slider img:last').clone().prependTo('.slider');
  $('.slider img').eq(1).clone().appendTo('.slider');
  $('.slider').css('margin-left', -slideWidth);  

  function nextSlide(){  
  interval = window.setInterval(animate, sliderInterval);
  }

  function animate(){
  if (margin==-slideCount*slideWidth-slideWidth){  
  slider.css({'marginLeft':-slideWidth});  
  margin=-slideWidth*2;
  }else if(margin==0 && course==-1){  
  slider.css({'marginLeft':-slideWidth*slideCount});
  margin=-slideWidth*slideCount+slideWidth;
  }else{  
  margin = margin - slideWidth*(course);  
  }
  slider.animate({'marginLeft':margin},animateTime);
  }

  function sliderStop(){  
  window.clearInterval(interval);
  }

  prev.click(function() {  
  if (slider.is(':animated')) { return false; }  
  var course2 = course;  
  course = -1;  
  animate();  
  course = course2 ;  
  });
  next.click(function() {  
  if (slider.is(':animated')) { return false; }  
  var course2 = course;  
  course = 1;  
  animate();  
  course = course2 ;  
  });

  slider.add(next).add(prev).hover(function() {  
  sliderStop();  
  }, nextSlide);  

  nextSlide();  
});
</script>

<style>
.slider-box{
  position:relative;
  width:320px;
  height:435px;
  overflow:hidden;
}
.slider{
  position:relative;
  width:10000px;
  height:435px;
}
.slider img{
  float:left;
  width:320px;
  height:435px;
}
.slider-box .prev, .slider-box .next{
  position:absolute;
  top:200px;
  display:block;
  width:29px;
  height:29px;
  cursor:pointer;
}
.slider-box .prev{
  left:10px;
  background:url(http://zornet.ru/Ajaxoskrip/Aster/slider_controls.png) no-repeat 0 0;
}
.slider-box .next{
  right:10px;
  background:url(http://zornet.ru/Ajaxoskrip/Aster/slider_controls.png) no-repeat -29px 0;
}
</style>
avatar