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

Написано nikita на . Опубликовано в 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;}

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

  • Артем

    |

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

    Ответить

    • nikita

      |

      Проверьте код, может не туда вставили. Я дал с рабочего сайта код.

      Ответить

  • Павел

    |

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

    Ответить

  • Алексей

    |

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

    Ответить

    • nikita

      |

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

      Ответить

  • Александр

    |

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

    Ответить

    • nikita

      |

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

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

      Ответить

  • Александр

    |

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

    Ответить

    • nikita

      |

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

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

      Ответить

  • Александр

    |

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

    Ответить

    • nikita

      |

      так ты не дописал теги ява скрипта.
      до и после этого текста напиши:

      Ответить

    • nikita

      |

      я подправил первый блок, скопируй с него все и вставь.

      Ответить

  • Александр

    |

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

    Ответить

  • Александр

    |

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

    Ответить

    • nikita

      |

      Попробуй в тексте скрипта заменить $(document).ready(function.....
      На
      $jQuery(document).ready(function....

      Ответить

  • Александр

    |

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

    Ответить

    • nikita

      |

      Да, все верно. Блин, отвечал тебе с телефона, косяк :))) убери $ перед jQuery

      Ответить

  • Александр

    |

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

    Ответить

    • nikita

      |

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

      Ответить

  • Александр

    |

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

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

    Ответить

    • nikita

      |

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

      Ответить

  • Evgen

    |

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

    Ответить

  • nikita

    |

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

    Ответить

  • EVGEN

    |

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

    Ответить

  • EVGEN

    |

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

    Ответить

  • Игорь

    |

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

    Ответить

  • Игорь

    |

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

    Ответить

  • Михаил

    |

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

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

    Ответить

  • Julia

    |

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

    Ответить

  • Julia

    |

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

    Ответить

  • Михаил

    |

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

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

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

    Ответить

    • nikita

      |

      Вроде бы все отображается, наверное просто кэш остался, нажмите CTRL+F5

      Ответить

      • Михаил

        |

        Спасибо! Все заработало!!!!!!!

        Ответить

  • Михаил

    |

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

    Столкнулся с проблемой. При просмотре сайта на смартфоне слайдер корежит сайт и не адаптируется под размер экрана смартфона.
    Подскажите, что можно сделать.

    Ответить

  • Михаил

    |

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

    Как сделать чтобы слайдер адаптировался под размер экрана смартфона?

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

    Ответить

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