PgwSlider- бесплатный адаптивный слайдер

Уважаемый гость! Для скачивания файлов с нашего портала необходимо авторизоваться:

Понравилась статья?

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

Демонстрация возможностей слайдера
На сайте pgwjs.com Вы сможете увидеть работу слайдера, и с помощью специальных опций "собрать свой слайдер мечты".

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


Установка
1. Первым делом скачиваем архив с файлами слайдера с нашего сайта
2. Папки "js" и "css" из скачанного архива переносим в корень сайта
3. В < head > прописываем следующее:
Код
<link rel="stylesheet" href="/css/pgwslider.css" type="text/css">  
<link rel="stylesheet" href="/css/pgwslider.min.css" type="text/css">

4. В то место, где мы хотим видеть слайдер прописываем:
Код
<ul class="pgwSlider">  
<li><img src="paris.jpg" alt="Paris, France" data-description="Eiffel Tower and Champ de Mars"></li>  
<li><img src="montreal_mini.jpg" alt="Montréal, QC, Canada" data-large-src="montreal.jpg"></li>  
<li>  
<img src="shanghai.jpg">  
<span>Shanghai, China</span>  
</li>  
<li>  
<a href="http://www.nyc.gov" target="_blank">  
<img src="new-york.jpg">  
<span>New York, NY, USA</span>  
</a>  
</li>  
  </ul>

5. И последний, завершающий этап- вызов скрипта. Для этого перед закрывающим тегом , прописываем следующее:
Код
<script type="text/javascript" src="/js/pgwslider.js"></script>  
<script type="text/javascript" src="/js/pgwslider.min.js"></script>  
<script>  
  $(document).ready(function() {  
  $('.pgwSlider').pgwSlider();  
  });  
</script>


На этом установка завершена.

Подробную документацию по слайдеру, вы найдете здесь.
Добавил: Admin Просмотров: 3650 Загрузок: 235 Категория: Интересные решения Комментарии
avatar
1
Вы не подскажите, возможно ли в этом слайдере оценивать сами слайды (ставить оценку каждому) или может посоветуете другой, с такими возможностями.
avatar
2
не могу понять куда ставить:
Код
$(document).ready(function() {
 слайдер не отображается корректно
avatar
0
3
Перед закрывающим тегом body
avatar
4
все равно слайдер не работает
avatar
0
5
Можно ссылку на сайт?
avatar
6
http://www.otdih-gagra.ru/index/fghjuipl/0-132
avatar
0
7
Так этот код надо было обернуть в <script>
Вот так:

Код
<script>

$(document).ready(function() {  
  $('.pgwSlider').pgwSlider();  
});  

</script>
avatar
8
Ничего не изменилось facepalm
avatar
0
9
Установил на тестовый сайт, в инструкции допущена ошибка.
Уже исправил.
В head вставляем только стили, т.е.:

Код
<link rel="stylesheet" href="/css/pgwslider.css" type="text/css">
  <link rel="stylesheet" href="/css/pgwslider.min.css" type="text/css">


, а перед закрывающем тегом body:

Код
<script type="text/javascript" src="/js/pgwslider.js"></script>
<script type="text/javascript" src="/js/pgwslider.min.js"></script>
<script>
     $(document).ready(function() {
  $('.pgwSlider').pgwSlider();
     });
</script>
avatar
10
не работает
avatar
0
11
Вы не подключили скрипты: а перед закрывающем тегом body:
Код
<script type="text/javascript" src="/js/pgwslider.js"></script>
<script type="text/javascript" src="/js/pgwslider.min.js"></script>
<script>
$(document).ready(function() {
$('.pgwSlider').pgwSlider();
});
</script>
avatar
12
Спасибо. Теперь разобралась. У меня слайдер в шапке конфликтует со слайдером из скрипта. И 2 слайда одновременно не функционируют.
avatar
13
Здравствуйте!

Не могу сделать отображение колонки слева.
Может кто подскажет?!
avatar