Автор Тема: Работа со слайдером  (Прочитано 92 раз)

madison21

Работа со слайдером
« : Июль 02, 2017, 12:41:35 pm »
Ребят,
хочу поделиться своим опытом по работе со слайдером (перелистывание фотографий), который сейчас выводится на главной странице.

Сергей в своём движке использовал этот слайдер http://bxslider.com/
У меня стала задача уменьшить скорость перелистывания изображений, иметь возможность остановить и запустить перелистывание, сделать плавнее переход от слайда к слайду.

По умолчанию в файле /css/css_unit-light/theme/slideshow.tpl.html прописываются настройки для слайдера и изображения, которые выводятся в него, но по умолчанию функций там всего пару.

На сайте этого слайдера есть примеры и документация по дополнительным функциям.

К примеру мои настройки сейчас выглядят так..

    <script type="text/javascript">
        $('.owl-carousel').bxSlider({
            nextText: '<i class="glyphicon glyphicon-chevron-right"></i>',
            prevText: '<i class="glyphicon glyphicon-chevron-left"></i>',
            auto: true,
    pause: 6000,
            speed: 2000,
            adaptiveHeight: true,
            mode: 'vertical',
            slideMargin: 5,
    autoControls: true
        })
    </script>

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

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

И ещё кстати можно, чтобы при нажатии на каждое фото, вы переходили на заданную страницу.
Вот так у меня..

<div class="item"><a href="./product/skazki_burogo_medvedya_lepeshkin_ma_dyurchek_ak-8341/"><img src="./css/css_{$smarty.const.CONF_COLOR_SCHEME}/image/banner1.jpg" class="img-responsive" /></a></div>

то есть картинку обрамить тегами<a></a> с указанием пути на нужную страницу.

Хочу ещё поделиться сервисом создания таких вот рекламных баннеров, да и вообще всяких красивых дизайнерских заготовок, как платных так и бесплатных там много.

Сервис называется https://www.canva.com/
Это самый популярный сервис подобного рода, действительно очень просто в нём работать, и очень богатый выбор различных шаблонов красивых и оригинальных.

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

Только плохо, что нигде я не нашёл инструкции по работе с ним.
Кто только начинает работать в области сайтостроения, будет непросто разобраться.

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

Если кому интересно, вот пример моих баннеров..





« Последнее редактирование: Июль 09, 2017, 01:09:10 am от madison21 »
 

pioner77

Re: Работа со слайдером
« Ответ #1 : Июль 03, 2017, 07:36:30 pm »
Огромное спасибо, за безупречно доступное описание работы со слайдером!
Это здорово облагородит функционал страниц сайта!
 

 

Sitemap 1 2 3 4