/
githubmirror
/
materialize
Обзор
Документация
Войти
/
githubmirror
/
materialize
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
v0.99.0
test/html/carousel.html
96 строк
4 KB
DanielRuf
use https for lorempixel images
20 июн 2017, 22:51
Не верифицирован
20 июн 2017, 22:51
e12fa5f
Код
Авторство
О чём код?
<!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" data-collapsible="accordion"> <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({ onOpen: function(el) { console.log("OPEN", el); var carousel = el.find('.carousel'); if (carousel.length) { carousel.trigger('carouselNext', [0.000001]); } }, onClose: function(el) { console.log("CLOSE", el); } }); $('ul.tabs').tabs({ onShow: function(tab) { $('.carousel.carousel-slider').carousel({fullWidth : true}); } }); $('.carousel.carousel-slider').carousel({fullWidth : true}); $('.carousel').carousel(); }); </script> </body> </html>