Страница 1 из 212»
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Мини слайдер в блок для сайта (JQuery слайдер с кнопками "Вперед" и "Назад")
Мини слайдер в блок для сайта
Angerfist
Дата: Суббота, 20.08.2016, 22:33 | Сообщение # 1
Vip
Сообщений:618
Награды: 18


Очень красиво и стильно создан слайдер для блока сайта, который не займет много места и особо не
будет отвлекать если уменьшить скорость анимации. Можно выводить материалы или любую актуальную
информацию через изображения.

Очередная версия JQuery слайдера с кнопками "Вперед" и "Назад", хорошо будет смотреться в боковом блоке сайта.
Описание можно прочитать по ссылке на источник, кнопки переключения слайдера можно скачать по ссылкам в CSS.




Код


<div class="slider-box">
<div class="slider">  
<a href="http://zornet.ru/"><img src="http://zornet.ru/_ld/2/27064973.jpg" alt=""></a>
<a href="http://zornet.ru/"><img src="http://zornet.ru/_ld/2/98431092.jpg" alt=""></a>
<a href="http://zornet.ru/"><img src="http://zornet.ru/_ld/2/75570915.jpg" alt=""></a>
<a href="http://zornet.ru/"><img src="http://zornet.ru/_ld/2/72977494.png" alt=""></a>
<a href="http://zornet.ru/"><img src="http://zornet.ru/_ld/2/08998814.jpg" alt=""></a>
</div>
<div class="prev"></div>
<div class="next"></div>
</div>



Код

<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>



Код

<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>


Источник материала.
Прикрепления: 9276201.jpg(45Kb)


No regrets

Сообщение отредактировал Angerfist - Воскресенье, 21.08.2016, 00:30
Kosten
Дата: Суббота, 20.08.2016, 22:43 | Сообщение # 2
Администраторы
Сообщений:12668
Награды: 39


Вот как раз он и под адаптацию мобильную подойдет, вообщем нормальный слайдер, нужно поставить на сайт.

FeStemBer
Дата: Суббота, 20.08.2016, 23:30 | Сообщение # 3
Проверенные
Сообщений:294
Награды: 1


Простой и не какого дизайн нет, что должно быть у слайдера, а то всякого туда напихают, отлично сделан.
Kosten
Дата: Суббота, 20.08.2016, 23:55 | Сообщение # 4
Администраторы
Сообщений:12668
Награды: 39


FeStemBer, тут не согласен, все равно дизайн должен быть присутствовать и он здесь есть. Только сделано все по умному, что можно поставить на любой стандартный шаблон, которые сейчас больше устанавливают.

tsakonter
Дата: Суббота, 20.08.2016, 23:58 | Сообщение # 5
Пользователи
Сообщений:151
Награды: 0


А скорость в стилях нужно настраивать, как вижу в скрипте нет такой функций.
Angerfist
Дата: Воскресенье, 21.08.2016, 00:24 | Сообщение # 6
Vip
Сообщений:618
Награды: 18


tsakonter, я как раз изменил скорость в коде, в скрипте

Код

sliderInterval = 7500,  
animateTime = 1000,


тут всё ясно интервал между анимацией и скорость прокрутки


No regrets
Kosten
Дата: Воскресенье, 21.08.2016, 00:29 | Сообщение # 7
Администраторы
Сообщений:12668
Награды: 39


Angerfist, не по теме, фильм только начал хосты набирать "Кто я" правообладатели объявились, судом грозят cool пришлось убрать.

Kosten
Дата: Воскресенье, 21.08.2016, 00:31 | Сообщение # 8
Администраторы
Сообщений:12668
Награды: 39


Цитата Angerfist ()
тут всё ясно интервал между анимацией и скорость прокрутки

Вот как раз это нужно вывести, то некоторые ставят и потом как быстрей или медленней сделать.


Angerfist
Дата: Воскресенье, 21.08.2016, 00:31 | Сообщение # 9
Vip
Сообщений:618
Награды: 18


Ладно) главное анонсировали что фильм крутой, кто захочет скачает на торренте)

No regrets
ucozmental
Дата: Воскресенье, 21.08.2016, 00:46 | Сообщение # 10
Пользователи
Сообщений:91
Награды: 0


Когда то такие кнопки по всему интернету искал, нужно было на слайдер, только горизонтальный, и пришлось ставить стрелки. Но эти бы вот как раз подошли.
Сафрон
Дата: Воскресенье, 21.08.2016, 00:51 | Сообщение # 11
Пользователи
Сообщений:159
Награды: 0


Angerfist, а есть такие широкие, чтоб они еще и адаптированные были, чтоб можно в шапку поставить.
csretven
Дата: Воскресенье, 21.08.2016, 00:56 | Сообщение # 12
Пользователи
Сообщений:46
Награды: 0


А как интересно сейчас горизонтальные слайдеры адаптируют под мобилу, возможно задают ширину, и он изчезает. По этому то все понятно, он хорошо в блоке обоснуется, вот в чем его плюс.
Советник
Дата: Воскресенье, 21.08.2016, 01:08 | Сообщение # 13
Пользователи
Сообщений:91
Награды: 0


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

Быстро, дешево и сердито!
Angerfist
Дата: Воскресенье, 21.08.2016, 01:12 | Сообщение # 14
Vip
Сообщений:618
Награды: 18


Сафрон, есть например FlexSlider и NivoSlider

No regrets
Сафрон
Дата: Воскресенье, 21.08.2016, 01:16 | Сообщение # 15
Пользователи
Сообщений:159
Награды: 0


Angerfist, можно посмотреть?
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Мини слайдер в блок для сайта (JQuery слайдер с кнопками "Вперед" и "Назад")
Страница 1 из 212»
Поиск: