|
Мини слайдер в блок для сайта
|
|
| Angerfist | Суббота, 20 Августа 2016, 22:33 | Сообщение 1 |
| Очень красиво и стильно создан слайдер для блока сайта, который не займет много места и особо не
будет отвлекать если уменьшить скорость анимации. Можно выводить материалы или любую актуальную
информацию через изображения.
Очередная версия 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>
Источник материала.
No regrets
Сообщение отредактировал
Angerfist - Воскресенье, 21 Августа 2016, 00:30 | | [ RU ] |
| |
| Kosten | Суббота, 20 Августа 2016, 22:43 | Сообщение 2 |
| Вот как раз он и под адаптацию мобильную подойдет, вообщем нормальный слайдер, нужно поставить на сайт.
| | [ RU ] |
| |
| FeStemBer | Суббота, 20 Августа 2016, 23:30 | Сообщение 3 |
| Простой и не какого дизайн нет, что должно быть у слайдера, а то всякого туда напихают, отлично сделан.
| | [ RU ] |
| |
| Kosten | Суббота, 20 Августа 2016, 23:55 | Сообщение 4 |
|
| FeStemBer, тут не согласен, все равно дизайн должен быть присутствовать и он здесь есть. Только сделано все по умному, что можно поставить на любой стандартный шаблон, которые сейчас больше устанавливают.
| | [ RU ] |
| |
| tsakonter | Суббота, 20 Августа 2016, 23:58 | Сообщение 5 |
| А скорость в стилях нужно настраивать, как вижу в скрипте нет такой функций.
| | [ RU ] |
| |
| Angerfist | Воскресенье, 21 Августа 2016, 00:24 | Сообщение 6 |
|
| tsakonter, я как раз изменил скорость в коде, в скрипте
Код
sliderInterval = 7500,
animateTime = 1000,
тут всё ясно интервал между анимацией и скорость прокрутки
No regrets
| | [ RU ] |
| |
| Kosten | Воскресенье, 21 Августа 2016, 00:29 | Сообщение 7 |
|
| Angerfist, не по теме, фильм только начал хосты набирать "Кто я" правообладатели объявились, судом грозят  пришлось убрать.
| | [ RU ] |
| |
| Kosten | Воскресенье, 21 Августа 2016, 00:31 | Сообщение 8 |
|
| Цитата Angerfist (  ) тут всё ясно интервал между анимацией и скорость прокрутки
Вот как раз это нужно вывести, то некоторые ставят и потом как быстрей или медленней сделать.
| | [ RU ] |
| |
| Angerfist | Воскресенье, 21 Августа 2016, 00:31 | Сообщение 9 |
|
| Ладно) главное анонсировали что фильм крутой, кто захочет скачает на торренте)
No regrets
| | [ RU ] |
| |
| ucozmental | Воскресенье, 21 Августа 2016, 00:46 | Сообщение 10 |
| Когда то такие кнопки по всему интернету искал, нужно было на слайдер, только горизонтальный, и пришлось ставить стрелки. Но эти бы вот как раз подошли.
| | [ RU ] |
| |
| Сафрон | Воскресенье, 21 Августа 2016, 00:51 | Сообщение 11 |
| Angerfist, а есть такие широкие, чтоб они еще и адаптированные были, чтоб можно в шапку поставить.
| | [ RU ] |
| |
| csretven | Воскресенье, 21 Августа 2016, 00:56 | Сообщение 12 |
| А как интересно сейчас горизонтальные слайдеры адаптируют под мобилу, возможно задают ширину, и он изчезает. По этому то все понятно, он хорошо в блоке обоснуется, вот в чем его плюс.
| | [ RU ] |
| |
| Советник | Воскресенье, 21 Августа 2016, 01:08 | Сообщение 13 |
| А почему вы решили, что ему адаптация не нужна, просто на самый мелкий монитор, он просто может немного вылести из блога, хотя уже таких мобтльных не выпускают, но все же поисковые системы с этого размера начинают.
Быстро, дешево и сердито!
| | [ RU ] |
| |
| Angerfist | Воскресенье, 21 Августа 2016, 01:12 | Сообщение 14 |
|
| Сафрон, есть например FlexSlider и NivoSlider
No regrets
| | [ RU ] |
| |
| Сафрон | Воскресенье, 21 Августа 2016, 01:16 | Сообщение 15 |
|
| Angerfist, можно посмотреть?
| | [ RU ] |
| |
