/
githubmirror
/
materialize
Обзор
Документация
Войти
/
githubmirror
/
materialize
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
1.0.0-beta
test/html/carousel.html
91 строка
4 KB
Chang Alan
fixed hidden carousels divide by zero error
15 авг 2017, 22:28
15 авг 2017, 22:28
67dfa32
Код
Авторство
О чём код?
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> <title>Documentation - Materialize</title> <!-- CSS --> <link href="../../../bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <h3>Carousel within collapsible</h3> <ul class="collapsible"> <li> <div class="collapsible-header active"><i class="material-icons">filter_drama</i>First</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>Second</div> <div class="collapsible-body"> <div class="carousel"> <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a> <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a> <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a> <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a> <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a> </div> </div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> </ul> <h3>Full Width Carousels in tabs</h3> <ul class="tabs"> <li class="tab col s6"><a href="#test1">Test 1</a></li> <li class="tab col s6"><a href="#test2">Test 2</a></li> </ul> <div id="test1" class="col s12"> <div class="carousel carousel-slider"> <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/800/400/food/1"></a> <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/800/400/food/2"></a> <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/800/400/food/3"></a> <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/800/400/food/4"></a> </div> </div> <div id="test2" class="col s12"> <div class="carousel carousel-slider"> <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/800/400/food/1"></a> <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/800/400/food/2"></a> <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/800/400/food/3"></a> <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/800/400/food/4"></a> </div> </div> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="../../../bin/materialize.js"></script> <script type="text/javascript"> $( document ).ready(function() { $('.collapsible').collapsible({ onOpenEnd: function(el) { console.log("OPEN", el); var carousel = $(el).find('.carousel'); carousel.carousel(); } }); $('ul.tabs').tabs({ onShow: function(tab) { $('.carousel.carousel-slider').carousel({fullWidth : true}); } }); $('.carousel').carousel(); $('.carousel.carousel-slider').carousel({fullWidth : true}); }); </script> </body> </html>