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

Все просто.

Подключение:

<script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./wow_book/wow_book.min.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />

Вывод объектов книги:

<div id="mybook">
  <div> This is the cover  </div>
  <div> This is the page 1 </div>
  <div> This is the page 2 </div>
  <div> This is the page 3 </div>
  <div> the end </div>
</div>

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

<?php
$dir    = 'images/slider';
$files = scandir($dir);
$i = 0;
foreach ($files as $value)
{
    if ($value !='.' and $value !='..' )
    {?>
        <div <? if($i===0){print 'id="cover"';}else{print 'class="responsive"';}?>>
            <img src="images/slider/<?=$value?>" width="100%" height="100%"/>
        </div>
    <?
        $i++;
    }
    else{}
}
?>

Скрипт настройки книги:

<script type="text/javascript"> 
  $(document).ready(function() {
    $('#mybook').wowBook({
      height : 500,
      width  : 600
    });
  });
</script>
[sociallocker id=1274]

Backup Wow book, jquery слайдер в стиле листания книги

Значок
Размер: 6.18 MB
Скачано (раз): 5214
Версия: 1.0.0
ФайлДействие
script.zipСкачать 
[/sociallocker]
Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне

, , , , , , ,
Показать комментарии

Romuald Shmidtelson

Об авторе

Web Developer. I have expirience in FrontEnd, Backend, Devops. PHP, Python, Javascript (Vue.js, React.js)

Смотреть посты