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

nikita33 комментария к записи Простой скрип слайдера на jquery для 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}

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

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

Related Posts

33 Comments

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

    Ответить

    1. Открой например main_content.html в папке с шаблоном и туда впиши весь код — два блока. Путь к картинкам только исправить надо во втором блоке.
      Стили можно прописать в конце файла стилей твоего шаблона.

      Ответить

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

    Ответить

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

      все. должно все отображаться.

      Ответить

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

    Ответить

    1. Так ты в вамшоп добавляешь?
      Сорри, оформи первый блок в теги яваскрипта, получится так:
      {Literal}

      {/literal}
      И css код не забудь добавить в стили, это третий блок.

      Ответить

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

    Ответить

    1. видимо конфликт какой то или не загружается библиотека правильно.
      попробуй еще так:
      вместо jquery написать обратно знак доллара и эту функцию запихнуть в :
      (function ($) {
      тут текст с первого блока начиная с $
      и заканчивая
      $(‘.control-slide’).eq(slideNum).addClass(‘active’);
      }
      }(jQuery))

      Ответить

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

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

    Ответить

    1. Отлично.
      Зарабатывать то можно чем умеешь. Если экономить, то путешествия по азии очень бюджетны. Можно жить на 300 баксов в месяц, скромно правда очень. Вот и ищешь рпботу под растраты :) можно и на месте работать.
      Почитай про камбоджу, там вообще бесплатно можно жить вполне нормально. :)

      Ответить

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

    Ответить

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

    Ответить

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

    Ответить

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

    Ответить

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

    Ответить

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

    Ответить

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

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

    Ответить

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

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

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

    Ответить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *