Простой скрип слайдера на jquery для VamShop

Написано nikita на 12 января, 2013. Опубликовано в VamShop

Очень часто необходимо вставить небольшой простой слайдер для смены картинок на странице.
Этот слайдер можно добавить на любую страницу vamshop, да и в принципе любую страницу любой cms.
Скрип просто вставляете через редактирование шаблона, например в файл templates/vamshop/module/main_content.html - тогда слайдер будет отображаться только на главной странице. Вместо vamshop выбираете папку вашего шаблона.
Настраивать скорость смены фото можно через hwSlideSpeed
Так же скрипт предполагает наличие кнопок управления, но в примере они убраны. Хотя в стиле css они описаны.(мало ли захотите добавить)

{literal}
<script type="text/javascript">
var hwSlideSpeed = 700;
var hwTimeOut = 4000;
var hwNeedLinks = false;
 
$(document).ready(function(e) {
    $('.slide').css(
        {"position" : "absolute",
         "top":'0', "left": '0'}).hide().eq(0).show();
    var slideNum = 0;
    var slideTime;
    slideCount = $("#slider .slide").size();
    var animSlide = function(arrow){
        clearTimeout(slideTime);
        $('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
        if(arrow == "next"){
            if(slideNum == (slideCount-1)){slideNum=0;}
            else{slideNum++}
            }
        else if(arrow == "prew")
        {
            if(slideNum == 0){slideNum=slideCount-1;}
            else{slideNum-=1}
        }
        else{
            slideNum = arrow;
            }
        $('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
        $(".control-slide.active").removeClass("active");
        $('.control-slide').eq(slideNum).addClass('active');
        }
 
if(hwNeedLinks){
var $linkArrow = $('<a id="prewbutton" href="#"></a><a id="nextbutton" href="#">Назад</a>')
    .prependTo('#slider');      
    $('#nextbutton').click(function(){
        animSlide("next");
 
        })
    $('#prewbutton').click(function(){
        animSlide("prew");
        })
}
    var $adderSpan = '';
    $('.slide').each(function(index) {
            $adderSpan += '<span class = "control-slide">' + index + '</span>';
        });
    $('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
    $(".control-slide:first").addClass("active");
 
    $('.control-slide').click(function(){
    var goToNum = parseFloat($(this).text());
    animSlide(goToNum);
    });
 
 
    var pause = false;
    var rotator = function(){
    if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
            }
    $('#slider-wrap').hover(    
        function(){clearTimeout(slideTime); pause = true;},
        function(){pause = false; rotator();
        });
    rotator();
});
</script>
{/literal}

{literal} <script type="text/javascript"> var hwSlideSpeed = 700; var hwTimeOut = 4000; var hwNeedLinks = false; $(document).ready(function(e) { $('.slide').css( {"position" : "absolute", "top":'0', "left": '0'}).hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").size(); var animSlide = function(arrow){ clearTimeout(slideTime); $('.slide').eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "next"){ if(slideNum == (slideCount-1)){slideNum=0;} else{slideNum++} } else if(arrow == "prew") { if(slideNum == 0){slideNum=slideCount-1;} else{slideNum-=1} } else{ slideNum = arrow; } $('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $('.control-slide').eq(slideNum).addClass('active'); } if(hwNeedLinks){ var $linkArrow = $('<a id="prewbutton" href="#"></a><a id="nextbutton" href="#">Назад</a>') .prependTo('#slider'); $('#nextbutton').click(function(){ animSlide("next"); }) $('#prewbutton').click(function(){ animSlide("prew"); }) } var $adderSpan = ''; $('.slide').each(function(index) { $adderSpan += '<span class = "control-slide">' + index + '</span>'; }); $('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap'); $(".control-slide:first").addClass("active"); $('.control-slide').click(function(){ var goToNum = parseFloat($(this).text()); animSlide(goToNum); }); var pause = false; var rotator = function(){ if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);} } $('#slider-wrap').hover( function(){clearTimeout(slideTime); pause = true;}, function(){pause = false; rotator(); }); rotator(); }); </script> {/literal}

И сам код для отображения слайдера без лишних кнопок и прочего

<div id="slider-wrap">
    <div id="slider">
        <div class="slide"><img src="/slider/01.jpg"></div>
        <div class="slide"><img src="/slider/02.jpg"></div>
	<div class="slide"><img src="/slider/03.jpg"></div>
	<div class="slide"><img src="/slider/04.jpg"></div>
    </div>
</div>

А вот сам стиль для этого слайдера. Учтите что в стиле описаны кнопки. в этом примере кнопок нет - только меняющиеся картинки

/* /SLIDER */
 
#slider-wrap{ /* Оболочка слайдера и кнопок */
    width:720px; 
	padding-top: 0px;
	margin: auto;
 
    }
#slider{ /* Оболочка слайдера */
  width: 720px;
height: 160px;
overflow: hidden;
position: relative;
}
#sli-links{
display: none;
}
.slide{ /* Слайд */
    width:100%;
    height:100%;
    }
.sli-links{ /* Кнопки смены слайдов */
 
    text-align:center;}
.sli-links .control-slide{
    margin:2px;
    display:inline-block;
    width:16px;
    height:16px;
    overflow:hidden;
    text-indent:-9999px;
/*    background:url(radioBg.png) center bottom no-repeat;} */
.sli-links .control-slide:hover{
    cursor:pointer;
    background-position:center center;}
.sli-links .control-slide.active{
    background-position:center top;}
#prewbutton, #nextbutton{ /* Ссылка "Следующий" и "Предыдущий" */
    display:block;
    width:15px;
    height:100%;
    position:absolute;
    top:0;
    overflow:hidden;
    text-indent:-999px;
    background:url(arrowBg.png) left center no-repeat;
    opacity:0.8;
    z-index:3;
    outline:none !important;}
#prewbutton{left:10px;}
#nextbutton{
    right:10px;
    background:url(arrowBg.png) right center no-repeat;}
#prewbutton:hover, #nextbutton:hover{
    opacity:1;}

Еще на эту тему:

Кометариев (34)

Артем

25 марта, 2013 at 01:47 | #

Поставил код скрипта и подстановки слайдера и у меня отрубилось отображение сайта (белый экран)

Ответить
- nikita
  
  25 марта, 2013 at 06:47 | #
  
  Проверьте код, может не туда вставили. Я дал с рабочего сайта код.
  
  Ответить
Павел

10 апреля, 2013 at 22:35 | #

Куда, какой код вставлять. Ничего не понял

Ответить
Алексей

16 апреля, 2013 at 14:15 | #

Куда и что вставлять??? Автор, по подробнее, вразуми.

Ответить
- nikita
  
  17 апреля, 2013 at 21:07 | #
  
  Открой например main_content.html в папке с шаблоном и туда впиши весь код - два блока. Путь к картинкам только исправить надо во втором блоке.
  Стили можно прописать в конце файла стилей твоего шаблона.
  
  Ответить
Александр

13 августа, 2014 at 16:19 | #

Никита, ты писал:
"Открой например main_content.html в папке с шаблоном и туда впиши весь код - два блока. Путь к картинкам только исправить надо во втором блоке.
Стили можно прописать в конце файла стилей твоего шаблона."
Может спецу это и понятно, что и куда, но я пытался раз 10 и вверху файла и внизу и в середине. Не получается. Может один раз разжевать для таких делетантов. Где и после чего вставлять.

Ответить
- nikita
  
  13 августа, 2014 at 21:53 | #
  
  Вставляешь слайдер в вамшоп?
  открываешь файл
  /templates/ТВОЙ-ШАБЛОН/module/main_content.html
  вставляешь в начало:
  --------
  {literal}
  здесь - текст из первого блока
  {/literal}
  здесь - текст из второго блока
  ----------
  далее открываешь файл stylesheet.css
  вставляешь в него, можно в конец, код из третьего блока.
  ----------
  в корне сайта создаешь папку slider и кладешь в нее 4 картинки 01.jpg .... 04.jpg
  
  все. должно все отображаться.
  
  Ответить
Александр

15 августа, 2014 at 12:46 | #

Никита, спасибо за ответ!
Все сделал как ты написал. Но теперь вверху страницы сайта показывается код из первого блока, а картинки из папки slider отображаются не в слайдере, а ниже кода один под другим.

Ответить
- nikita
  
  15 августа, 2014 at 13:07 | #
  
  Так ты в вамшоп добавляешь?
  Сорри, оформи первый блок в теги яваскрипта, получится так:
  {Literal}
  
  {/literal}
  И css код не забудь добавить в стили, это третий блок.
  
  Ответить
Александр

15 августа, 2014 at 14:32 | #

Фото наладил, отображается одно, но не переключается и код все равно отображается.

Ответить
- nikita
  
  15 августа, 2014 at 15:28 | #
  
  так ты не дописал теги ява скрипта.
  до и после этого текста напиши:
  
  Ответить
- nikita
  
  15 августа, 2014 at 15:30 | #
  
  я подправил первый блок, скопируй с него все и вставь.
  
  Ответить
Александр

16 августа, 2014 at 00:57 | #

Спасибо, все получилось! Но слайды не меняются. Уж будь добр, помоги и с этим.

Ответить
- nikita
  
  16 августа, 2014 at 01:33 | #
  
  попробуй замени jquery.js на этот :
  https://KeyToWay.ru/upload/jquery.js
  твой лежит в папке - jscript/jquery/jquery.js
  
  твой совсем старый, может в нем проблема.
  
  Ответить
Александр

17 августа, 2014 at 11:53 | #

Никита, привет!
Заменил jquery.js-проблема осталась. Понимаю, что достаю тебя, но обидно на последнем этапе опустить руки. Уж больно заинтиговал!

Ответить
- nikita
  
  17 августа, 2014 at 12:06 | #
  
  Попробуй в тексте скрипта заменить $(document).ready(function.....
  На
  $jQuery(document).ready(function....
  
  Ответить
Александр

17 августа, 2014 at 20:22 | #

Увы, видно не судьба. Я ведь правильно менял в main_content.html?

Ответить
- nikita
  
  18 августа, 2014 at 10:26 | #
  
  Да, все верно. Блин, отвечал тебе с телефона, косяк :))) убери $ перед jQuery
  
  Ответить
Александр

18 августа, 2014 at 16:07 | #

Убрал-изменений нет. Неужели только у меня такая фигня?

Ответить
- nikita
  
  18 августа, 2014 at 19:29 | #
  
  видимо конфликт какой то или не загружается библиотека правильно.
  попробуй еще так:
  вместо jquery написать обратно знак доллара и эту функцию запихнуть в :
  (function ($) {
  тут текст с первого блока начиная с $
  и заканчивая
  $('.control-slide').eq(slideNum).addClass('active');
  }
  }(jQuery))
  
  Ответить
Александр

19 августа, 2014 at 11:44 | #

Никита, не поверишь-получилось! И знаешь что сделал?
В строке из первого блока $(document).ready(function(e) {
в последних круглых скобках вместо е вписал $. Получилось:
jQuery(document).ready(function($) {

Работает. Спасибо!
Да, а чем ты зарабатываешь на путешествия? Я тоже хочу.

Ответить
- nikita
  
  19 августа, 2014 at 15:28 | #
  
  Отлично.
  Зарабатывать то можно чем умеешь. Если экономить, то путешествия по азии очень бюджетны. Можно жить на 300 баксов в месяц, скромно правда очень. Вот и ищешь рпботу под растраты :) можно и на месте работать.
  Почитай про камбоджу, там вообще бесплатно можно жить вполне нормально. :)
  
  Ответить
Evgen

14 октября, 2014 at 23:53 | #

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

Ответить
nikita

15 октября, 2014 at 00:04 | #

Если вы хотите использовать на одной странице несколько слайдеров, то этот код не подойдет. Если на одной странице 1 слайдер - то можно использовать на любой странице сайта.

Ответить
EVGEN

15 октября, 2014 at 16:21 | #

Да я хочу на одной странице использовать слайдер, только вот не знаю как будет это работать в вам шопе, т.е. у меня в разделе есть 100 новостей и я хочу чтоб в каждой новости был свой слайдер, а насколько я знаю код этот вставляется в один файл latest_news.html
и соответственно будет получаться что при создании следующей новости (и во всех старых новостях) бдует висеть один слайдер, который будет прописан в latest_news
Или как-то по другому надо это делать?

Ответить
EVGEN

16 октября, 2014 at 15:04 | #

Короч мне надо чтоб в админке, раздел Разное - Новости была функция слайдера при создании новой статьи.. как то так, реально ли это сделать с помощью этого слайдера который вы описали?

Ответить
Игорь

29 июня, 2015 at 12:31 | #

Никита! Подскажи, как добавить кнопки переключения. Брось дописанный скрипт плиз.
Спасибо!

Ответить
Игорь

29 июня, 2015 at 12:36 | #

Ещё возможно в слайдере ли при переключении картинок вставить ссылки. Хочу типо сделать рекламные баннеры картинками на гл.странице. Если кликнут на определённую картинку (01.jpg или 02.jpg т.д.), то по ссылке можно будет попасть на другую страницу.

Ответить
Михаил

5 октября, 2016 at 11:14 | #

Доброе время суток!
У меня все заработало с первого раза. Спасибо!
Вот хотелось бы кнопочки сделать, что бы клиент сам листал.
Подскажите как. Буду очень благодарен.

С Уважением
Михаил

Ответить
Julia

27 февраля, 2017 at 00:40 | #

У меня не получилось:( Исправляла все пошагово, как вы писали. В итоге пустая страница...

Ответить
Julia

27 февраля, 2017 at 00:42 | #

Возможно у меня совсем старая версия Вамшоп?

Ответить
Михаил

31 марта, 2017 at 13:21 | #

Доброе время суток.

Поставил слайдер в Мазиле работает отлично, в Яндекс броузер работает отлично, а вот в Гугле не работает. Картинки не показываются.
Подскажите в чем может быть причина.
Заранее благодарю!

С Уважением
Михаил

Ответить
- nikita
  
  1 апреля, 2017 at 01:51 | #
  
  Вроде бы все отображается, наверное просто кэш остался, нажмите CTRL+F5
  
  Ответить
  - Михаил
    
    3 апреля, 2017 at 09:26 | #
    
    Спасибо! Все заработало!!!!!!!
    
    Ответить

Еще на эту тему:

Кометариев (34)

Оставить комментарий