{"id":4422,"date":"2015-05-24T18:50:49","date_gmt":"2015-05-24T16:50:49","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=4422"},"modified":"2015-05-25T13:35:45","modified_gmt":"2015-05-25T11:35:45","slug":"plugins-scripts-js-slideshows-responsive-touch-swipe","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/plugins-scripts-js-slideshows-responsive-touch-swipe","title":{"rendered":"Plugins et scripts JS pour des slideshows responsive"},"content":{"rendered":"<p>Apr\u00e8s vous avoir propos\u00e9 cette <a href=\"\/blog\/ressources-telechargements\/selection-slideshow-carrousels-javascript\">s\u00e9lection de slideshow<\/a> il y a maintenant deux ans, celle que je vous propose aujourd&rsquo;hui vient compl\u00e9ter un nouveau besoin r\u00e9el : <strong>le responsive<\/strong> et la prise en charge des <strong>actions au <em>touch<\/em><\/strong>. Je vais vous pr\u00e9senter 3 outils qui se ressemblent et qui proposent tous leurs particularit\u00e9s.<\/p>\n<p><!--more--><\/p>\n<p>C&rsquo;est devenu un vrai besoin si vous concevez des sites web modernes pour vos clients. Aujourd&rsquo;hui il est difficile de passer \u00e0 c\u00f4t\u00e9 du slideshow dans la demande qui accompagne un site web, et m\u00eame si <a href=\"http:\/\/doisjeutiliser.fr\/unCarrousel\/\">le slideshow n&rsquo;est pas toujours indispensable<\/a>, lorsque vous aurez besoin de le faire, autant vous armer des bons outils.<\/p>\n<p>Voici donc une petite s\u00e9lection loin d&rsquo;\u00eatre exhaustive, mais qui propose les outils que j&rsquo;ai pu tester par le pass\u00e9 dans des projets web.<\/p>\n<h2>iDangerous Swiper<\/h2>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.idangero.us\/swiper\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-5021\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/11\/swiper-idangerous.jpg\" alt=\"Slideshow iDangerous Swiper\" width=\"1920\" height=\"1002\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/11\/swiper-idangerous.jpg 1920w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/11\/swiper-idangerous-300x157.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/11\/swiper-idangerous-600x313.jpg 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/a><\/p>\n<p>iDangerous c&rsquo;est cette team qui d\u00e9veloppe Framework7 et nouvellement Template7. Elle fait pas mal de recherches pour proposer des solutions open source efficaces.<\/p>\n<p>Swiper propose de nombreuses <a href=\"http:\/\/www.idangero.us\/swiper\/demos\/\">d\u00e9monstrations<\/a> que je vous invite \u00e0 regarder pour voir o\u00f9 vous mettez les pieds si vous faites les choix de ce script pour vos slideshow.<\/p>\n<ul>\n<li>Non d\u00e9pendant de jQuery<\/li>\n<li>Responsive<\/li>\n<li>Compatible avec les \u00e9v\u00e9nements <em>Touch<\/em><\/li>\n<li>Compatibilit\u00e9 <em>Grab<\/em> (action cliquer\/glisser \u00e0 la souris)<\/li>\n<li>Autoplay en option<\/li>\n<li>CSS3 animation (acc\u00e9l\u00e9ration mat\u00e9riel)<\/li>\n<li>Effet de r\u00e9sistance activable<\/li>\n<li>JSON Data<\/li>\n<li>Touch Framework App<\/li>\n<li>Slider imbriqu\u00e9s (Nested sliders)<\/li>\n<li>Horizontal ou vertical<\/li>\n<li>Multiple occurrences<\/li>\n<li>Simple slide ou multiple items (ou \u00ab\u00a0roue libre\u00a0\u00bb)<\/li>\n<li>Prise en compte du redimensionnement<\/li>\n<li>Fonction de callback de plusieurs \u00e9v\u00e9nements bien pratiques<\/li>\n<li>Relativement l\u00e9ger compte tenu de ce qu&rsquo;il embarque et de l&rsquo;absence du besoin de jQuery ( 44 ko minifi\u00e9 de JS + 3 ko de CSS)<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a class=\"demo\" href=\"http:\/\/www.idangero.us\/swiper\">D\u00e9couvrir Swiper de iDangerous<\/a><\/p>\n<h2>\u00a0Flickity<\/h2>\n<p style=\"text-align: left;\"><a href=\"http:\/\/flickity.metafizzy.co\/\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-5022\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/11\/flickity-slider.png\" alt=\"Slideshow Flickity\" width=\"1920\" height=\"1002\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/11\/flickity-slider.png 1920w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/11\/flickity-slider-300x157.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/11\/flickity-slider-600x313.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/a><\/p>\n<p style=\"text-align: left;\">Flickity est un peu plus r\u00e9cent, et je n&rsquo;ai pas eu l&rsquo;occasion de le tester en production, mais d&rsquo;apr\u00e8s ce que j&rsquo;ai pu voir ce petit n&rsquo;a rien \u00e0 envier \u00e0 ses pr\u00e9d\u00e9cesseurs.<\/p>\n<p style=\"text-align: left;\">Quelques uns de ses avantages :<\/p>\n<ul>\n<li>Non d\u00e9pendant de jQuery<\/li>\n<li>Initialisable avec JS, jQuery ou par data-* HTML5<\/li>\n<li>Responsive<\/li>\n<li>Compatibilit\u00e9 avec les \u00e9v\u00e9nements <em>Touch<\/em><\/li>\n<li>Compatibilit\u00e9 <em>Grab<\/em> (action cliquer\/glisser \u00e0 la souris)<\/li>\n<li>Auto play (option)<\/li>\n<li>Simulation de la r\u00e9sistance<\/li>\n<li>Simple slide ou multiple items (ou \u00ab\u00a0roue libre\u00a0\u00bb)<\/li>\n<li>Prise en compte du redimensionnement<\/li>\n<li>Fonction \u00ab\u00a0watch CSS\u00a0\u00bb qui permet de synchroniser le diaporama aux media-queries<\/li>\n<li>Compatible ImageLoaded pour du chargement asynchrone des images<\/li>\n<li>Option d&rsquo;accessibilit\u00e9 clavier<\/li>\n<li>Option RTL<\/li>\n<li>Option des boutons suivant et pr\u00e9c\u00e9dent ainsi que de la pagination<\/li>\n<li>Exemples de codes CSS<\/li>\n<li>API document\u00e9e<\/li>\n<li>53 ko de JS et 2,6 ko de CSS<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a class=\"demo\" href=\"http:\/\/flickity.metafizzy.co\/\">D\u00e9couvrir Flickty<\/a><\/p>\n<h2>Owl Carousel<\/h2>\n<p><a href=\"http:\/\/www.owlgraphic.com\/owlcarousel\/\"><img decoding=\"async\" class=\"aligncenter wp-image-4982 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/11\/owl-carousel-responsive-touch.png\" alt=\"Owl Carousel Responsive Slideshow\" width=\"1920\" height=\"1002\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/11\/owl-carousel-responsive-touch.png 1920w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/11\/owl-carousel-responsive-touch-300x157.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/11\/owl-carousel-responsive-touch-600x313.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/a><\/p>\n<p>Owl Carousel est utilis\u00e9 dans pas mal de th\u00e8mes WordPress et int\u00e9grations statiques vendus ou partag\u00e9s sur le Web. L&rsquo;outil est tr\u00e8s complet et propose une API exub\u00e9rante, si je puis dire. Voici une synth\u00e8se :<\/p>\n<ul>\n<li>D\u00e9pendant de jQuery<\/li>\n<li>Responsive<\/li>\n<li>Touch enabled<\/li>\n<li>Grab enabled<\/li>\n<li>autoplay en option<\/li>\n<li>CSS3 animation (acc\u00e9l\u00e9ration mat\u00e9riel)<\/li>\n<li>Lazyload des images<\/li>\n<li>JSON data<\/li>\n<li>Multiple occurrences<\/li>\n<li>Simple slide ou multiple items<\/li>\n<li>Prise en compte du redimensionnement<\/li>\n<li>Fonction de callback de plusieurs \u00e9v\u00e9nements bien pratiques<\/li>\n<li>Relativement l\u00e9ger (23 ko minifi\u00e9 de JS + 5 ko de CSS)<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a class=\"demo\" href=\"http:\/\/www.owlgraphic.com\/owlcarousel\/\">D\u00e9couvrez Owl Carousel<\/a><\/p>\n<p>J&rsquo;esp\u00e8re que cette petite s\u00e9lection de <strong>diaporama compatible <em>touch<\/em><\/strong> vous sera utile. N&rsquo;h\u00e9sitez pas si vous avez des retours \u00e0 faire sur leur utilisation.<\/p>\n<p>Merci \u00e0 vous !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apr\u00e8s vous avoir propos\u00e9 cette s\u00e9lection de slideshow il y a maintenant deux ans, celle que je vous propose aujourd&rsquo;hui vient compl\u00e9ter un nouveau besoin r\u00e9el : le responsive et la prise en charge des actions au touch. Je vais vous pr\u00e9senter 3 outils qui se ressemblent et qui proposent tous leurs particularit\u00e9s.<\/p>\n","protected":false},"author":4,"featured_media":5028,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[610,50],"tags":[461,125,52,403,113,608,609],"coauthors":[597],"class_list":["post-4422","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-ressources-telechargements","tag-carrousel","tag-javascript","tag-jquery","tag-responsive","tag-slideshow","tag-swipe","tag-touch"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/4422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=4422"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/4422\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/5028"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=4422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=4422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=4422"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=4422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}