База знаний
по возможностям платформы

Как сделать слайдер (слайд-шоу, галерею) на целевых страницах

Слайдер

Внимание: галерею (слайдер с прокруткой и увеличением изображений по клику) и слайдер отзывов можно создать использовав готовые инструменты нашего редактора:

Скриптовая реализация нестандартного слайдера: 

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

Наглядный пример предложенной галереи вы можете просмотреть и протестировать здесь.

1. Скопируйте код (Part 1), размещенный здесь, и вставьте его через инструмент “Скрипты” перед тегом </BODY>.

2. Скопируйте код (Part 2), размещенный здесь, и вставьте его через инструмент “Скрипты” внутри тега <HEAD>.

3. Через инструмент “Произвольный HTML” интегрируйте код, размещенный тут.

Внимание! Вместо http://URLизображения/1.png (и прочих) нужно указать ссылки на изображения, которые должны отображаться в галерее!

Количество изображений может быть разным. Все изображения должны размещаться либо на собственном хостинге, либо в каком-то файловом хранилище, к которому есть доступ через Глобальную Сеть.

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 8 из 10
Еще есть вопросы? Отправить запрос

Комментарии

  • Avatar
    Алексей Таскаев

    Сделал все как написано выше, Почему то не работает?

  • Avatar
    Лина Малькова

    Обратитесь в службу поддержки, заполнив форму обратной связи: http://lpgenerator.ru/help/ (http://lpgenerator.ru/help/)

  • Avatar
    Алексей Таскаев

    В HTML вставить:

     
       
           
           
           
       
       
        prev
        next
       

        

           

    $("#foo2").carouFredSel({
        circular: false,
        infinite: false,
        auto     : false,
        prev    : {   
            button    : "#foo2_prev",
            key        : "left"
        },
        next    : {
            button    : "#foo2_next",
            key        : "right"
        },
        pagination    : "#foo2_pag"
    });

    Внутри тега
      
    .image_carousel {
        padding: 7px 7px;
        position: relative;
           background-color: #333333;
           width: 600px;
           height: 214px;
    }
    .image_carousel img {
        border: 1px solid #ccc;
        background-color: white;
        padding: 0px;
        margin: 0 1px;
        display: block;
        float: left;
    }
    a.prev, a.next {
        background: url(http://media.lpgenerator.ru/images/10285/miscellaneoussprite1_1.png) no-repeat transparent;
        width: 45px;
        height: 50px;
        display: block;
        position: absolute;
        top: 85px;
    }
    a.prev {            left: -38px;
                        background-position: 0 0; }
    a.prev:hover {        background-position: 0 -50px; }
    a.prev.disabled {    background-position: 0 -100px !important;  }
    a.next {            right: -38px;
                        background-position: -50px 0; }
    a.next:hover {        background-position: -50px -50px; }
    a.next.disabled {    background-position: -50px -100px !important;  }
    a.prev.disabled, a.next.disabled {
        cursor: default;
    }

    a.prev span, a.next span {
        display: none;
    }
    .pagination {
        text-align: center;
    position: relative;
    top:10px;
    }
    .pagination a {
        background: url(http://media.lpgenerator.ru/images/10285/miscellaneoussprite1_1.png) 0 -300px no-repeat transparent;
        width: 15px;
        height: 16px;
        margin: 0 5px 0 0;
        display: inline-block;
    }
    .pagination a.selected {
        background-position: -25px -300px;
        cursor: default;
    }
    .pagination a span {
        display: none;
    }
    .clearfix {
        float: none;
        clear: both;
    }

    .simple_overlay {
       display:none;
       position:fixed;
       z-index:10000000;
       background-color:#333;
       /width:675px;/
      /* min-height:200px;*/
       margin: auto auto;
       border:1px solid #666;
       -moz-box-shadow:0 0 90px 5px #000;
       -webkit-box-shadow: 0 0 90px #000;
    }

    /* close button positioned on upper right corner */
    .simple_overlay .close {
       background-image:url(http://jquerytools.org/media/img/overlay/close.png);
       position:absolute;
       right:-15px;
       top:-15px;
       cursor:pointer;
       height:35px;
       width:35px;
    }

    Перед тегом

  • Avatar
    Алексей Таскаев

    Вот так работает.

  • Avatar
    Игорь Граф

    А можно сделат, чтобы он автоматически менял изображение

  • Avatar
    Пользователь Dim0n-RMZ

    можно...на странице выбираем вкладку "HTMl" и вставляем туда)

    соответственно заменяя ссылки типа "http://media.lpgenerator.ru/images/15162/2_4.100x100.jpg" на свои)

     

     

     

    Простая замена картинок с помощью JQuery
    div#rotator {position:relative; height:150px; margin-left: 15px;}
    div#rotator ul li {float:left; position:absolute; list-style: none;}
    div#rotator ul li.show {z-index:500;}

    function theRotator() {
    // Устанавливаем прозрачность всех картинок в 0
    $('div#rotator ul li').css({opacity: 0.0});

    // Берем первую картинку и показываем ее (по пути включаем полную видимость)
    $('div#rotator ul li:first').css({opacity: 1.0});

    // Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд
    setInterval('rotate()',5000);
    }

    function rotate() {
    // Берем первую картинку
    var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));

    // Берем следующую картинку, когда дойдем до последней начинаем с начала
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));

    // Расскомментируйте, чтобы показвать картинки в случайном порядке
    // var sibs = current.siblings();
    // var rndNum = Math.floor(Math.random() * sibs.length );
    // var next = $( sibs[ rndNum ] );

    // Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    // Прячем текущую картинку
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
    };

    $(document).ready(function() {
    // Запускаем слайдшоу
    theRotator();
    });

     

     

     

  • Avatar
    Денис Поликарпов

    Добрый день, Dim0n-RMZ.

    Подскажите, а как можно сделать так, чтобы слайдер менялся вбок, а не вниз?

  • Avatar
    Павел Замятин

    Добрый день! Спасибо за статью, очень помогла! Подскажите, а можно прикрутить к изображение ссылку?

  • Avatar
    Сергей

    как слайдер был из одной картинки? а не из 3 как в данном случае? http://prntscr.com/1dqy17

  • Avatar
    Лина Малькова

    Здравствуйте!

    Павел Замятин (https://lpgenerator.zendesk.com/users/409460678), можно. Добавьте его с помощью инструмента "Изображение" и в меню справа вставьте нужную ссылку.

    Сергей (https://lpgenerator.zendesk.com/users/417268671), Вы можете модифицировать код сами или найти решение в интернете. Любой слайдер можно интегрировать аналогично тому, что описан в этом примере.

  • Avatar
    Пользователь zakazmr

    Подскажите пожалуйста, как вставить вот такой слайдер http://pcvector.net/scripts/slideshow_and_scroller/374-mobilyslider-prostoy-jquery-slayder.html в lpgenerator? Методом научного тыка не смог разобраться((

  • Avatar
    Павел Захаров

    Сделал всё по инструкции, переделал уже 5 раз. получается что в галлерее стоят 3 картинки и все остальные под галлереей расположились по 2 штуки в столбик! Может код неправильно написан, или в скрипте что то не так? помогите пожалуйста, очень нужно! Благодарю!

  • Avatar
    Пользователь SergeyShpil

    Здравствуйте! А можно ли сделать так, чтобы в слайдере показывались не 3 сразу картинки, а 1?

  • Avatar
    Пользователь islandiya

    Добрый день! Создала 2 галереи с автоматической сменой. Первая вообще не работает. Вторая работает, съедая 2 изображения( т.е. из 4 возможных показывает только 2). В чем может быть проблема? 

  • Avatar
    Виталий Гандзий

    Не работает оно. Напишите пожалуйста нормальный код.

  • Avatar
    Пользователь vadim

    А два таких слайдера можно поставить на одну страницу?

  • Avatar
    Эльдар Шманов

    непонятно как сделать чтобы в окне была одна картинка с последующими перелиставающими другими картинками

  • Avatar
    Пользователь old102

    у меня есть картинки, как мне теперь добавить ссылки на эти картинки?

  • Avatar
    Евгения

    Здравствуйте.При дублировании слайдера все криво, картинки в столбик.Как исправить?

  • Avatar
    Сергей

    а куда надо добавлять картинку я не понял

  • Avatar
    Сергей юлия

    сделала все по инструкции, но ничего не работает. Картинки показываются все сразу столбиками вниз. ИСПРАВЬТЕ ОШИБКУ

  • Avatar
    Андрей Болдырев

    Такая же проблема как у предыдущего... картинки все разом и в столбец.

  • Avatar
    Дмитрий

    Здравствуйте!

    Подобная проблема возникает обычно при конфликте библиотек (если у Вас, например, также на странице находятся всплывающие окна или галерея) или при некорректной интеграции кода. Напишите по адресу support@lpgenerator.ru с указанием проблемы и страницы, на которой она возникла. Наши специалисты помогут все настроить.

  • Avatar
    Олег

    Здравствуйте. Почему картинки на слайдере не четкие? От разрешения зависит? Какой размер можно вставлять?

  • Avatar
    Алена Балакина

    Здравствуйте, Олег!

    Можно вставлять изображения любого размера.

    Но если Ваше изображение небольшое (например 260х194 px), а в коде Вы растягиваете его ширину и высоту соответствующими параметрами (например, width="500" height="500") , то картинка будет нечеткой.
    Данные параметры должны соответствовать размеру исходного изображения.

    Размер картинки рекомендуем редактировать до его загрузки в медиа-галерею.

  • Avatar
    Artur Buzdes

    Здравствуйте как изменить цвет и размер шрифта в слайдере? Как вообще реализован слайдер тут: http://lpgenerator.ru/store/preview/314/

  • Avatar
    Дмитрий

    Здравствуйте!

    Возможно, Вы имели ввиду слайдер-отзывов. Цвет и размер шрифта можно изменить с помощью javascript-кода. Обратитесь по адресу support@lpgenerator.ru, мы вышлем Вам соответствующий скрипт.

  • Avatar
    Сергей Игнатов

    Здравствуйте, я мне очень нужно сделать слайдер как вот на этом сайте http://dev.landingpage.bz/grand-wending/
    Руки не доходят, хотя он на вид не сложный. Может кто сможет помочь скриптом?

  • Avatar
    Максим Гуйван

    Здравствуйте, Сергей!

    Служба технической поддержки оказывает всяческую помощь в рамках перечня наших скриптов и инструментов. Если же требуется нестандартное решение, необычная реализация или дополнительный функционал, — всё это возможно через отдел вёрстки и дизайна. Запросить более подробную консультацию вы можете со страницы http://verstka.lpgenerator.ru/

  • Avatar
    Пользователь zed_cool

    Вот еще хороший вариантик - http://siteacademy.ru/index.php/css/39-css/fast-hover-slideshow

На базе технологии Zendesk