{"id":375,"date":"2015-12-17T16:21:35","date_gmt":"2015-12-17T16:21:35","guid":{"rendered":"https:\/\/www.demenageur-site.com\/blog\/?p=375"},"modified":"2015-12-17T16:24:44","modified_gmt":"2015-12-17T16:24:44","slug":"bootstrap-slider-vertical-full-page-cover","status":"publish","type":"post","link":"https:\/\/www.demenageur-site.com\/blog\/2015\/12\/bootstrap-slider-vertical-full-page-cover\/","title":{"rendered":"Bootstrap slider vertical full page cover"},"content":{"rendered":"

je poste rarement de billets sur CSS \/ JQuery \/ Bootstrap …<\/p>\n

Je cherchais \u00e0 faire un slider bootstrap qui soit \u00e0 la fois \u00ab\u00a0full page\u00a0\u00bb (en \u00ab\u00a0cover\u00a0\u00bb) ET qui slide verticalement.<\/p>\n

Voici donc la manipulation :<\/p>\n

Ajouter \u00ab\u00a0vertical<\/strong>\u00a0\u00bb dans la div \u00ab\u00a0carroussel-inner\u00a0\u00bb et utiliser un css inline pour l’image (fill<\/strong>)<\/p>\n

<!-- Vertical Full Page Image Background Carousel Header -->\r\n\r\n <header id=\"Concours\" class=\"carousel slide\">\r\n <!-- Wrapper for Slides -->\r\n <div class=\"carousel-inner vertical<\/strong>\">\r\n \r\n \r\n <div class=\"item active\">\r\n <div class=\"fill<\/strong>\" style=\"background-image:url('\/img\/concours\/AA.jpg');\"><\/div>\r\n <div class=\"carousel-caption\">\r\n <h2><span>Batiment<\/span><\/h2>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n <div class=\"item\">\r\n <div class=\"fill\" style=\"background-image:url('\/img\/concours\/Archi.jpg');\"><\/div>\r\n <div class=\"carousel-caption\">\r\n <h2>Archi<\/h2>\r\n <\/div>\r\n <\/div>\r\n \r\n  \r\n \r\n \r\n <\/div>\r\n <!-- Controls -->\r\n <a class=\"left carousel-control\" href=\"#Concours\" data-slide=\"prev\">\r\n <span class=\"icon-prev\"><\/span>\r\n <\/a>\r\n <a class=\"right carousel-control\" href=\"#Concours\" data-slide=\"next\">\r\n <span class=\"icon-next\"><\/span>\r\n <\/a>\r\n <\/header>\r\n\r\n\r\n<\/pre>\n
Et la feuille de style qui va avec :<\/p>\n
.carousel,\r\n.item,\r\n.active {\r\n height: 100%;\r\n \r\n}\r\n\r\n.carousel-inner {\r\n height: 100%;\r\n}\r\n\r\n\/* Background images are set within the HTML using inline CSS, not here *\/\r\n.fill {\r\n width: 100%;\r\n height: 100%;\r\n background-position: center;\r\n -webkit-background-size: cover;\r\n -moz-background-size: cover;\r\n background-size: cover;\r\n -o-background-size: cover;\r\n margin-bottom: 50px;\r\n}\r\n\r\n.carousel-inner.vertical {\r\n height: 100%;\r\n}\r\n.carousel-inner.vertical > .item {\r\n -webkit-transition: .6s ease-in-out top;\r\n -o-transition: .6s ease-in-out top;\r\n transition: .6s ease-in-out top;\r\n}\r\n@media all and (transform-3d),\r\n(-webkit-transform-3d) {\r\n .carousel-inner.vertical > .item {\r\n -webkit-transition: -webkit-transform .6s ease-in-out;\r\n -o-transition: -o-transform .6s ease-in-out;\r\n transition: transform .6s ease-in-out;\r\n -webkit-backface-visibility: hidden;\r\n backface-visibility: hidden;\r\n -webkit-perspective: 1000;\r\n perspective: 1000;\r\n }\r\n .carousel-inner.vertical > .item.next,\r\n .carousel-inner.vertical > .item.active.right {\r\n top: 0;\r\n -webkit-transform: translate3d(0, 100%, 0);\r\n transform: translate3d(0, 100%, 0);\r\n }\r\n .carousel-inner.vertical > .item.prev,\r\n .carousel-inner.vertical > .item.active.left {\r\n top: 0;\r\n -webkit-transform: translate3d(0, -100%, 0);\r\n transform: translate3d(0, -100%, 0);\r\n }\r\n .carousel-inner.vertical > .item.next.left,\r\n .carousel-inner.vertical > .item.prev.right,\r\n .carousel-inner.vertical > .item.active {\r\n top: 0;\r\n -webkit-transform: translate3d(0, 0, 0);\r\n transform: translate3d(0, 0, 0);\r\n }\r\n}\r\n.carousel-inner.vertical > .active {\r\n top: 0;\r\n}\r\n.carousel-inner.vertical > .next,\r\n.carousel-inner.vertical > .prev {\r\n top: 0;\r\n height: 100%;\r\n width: 100%;\r\n}\r\n.carousel-inner.vertical > .next {\r\n left: 0;\r\n top: 100%;\r\n}\r\n.carousel-inner.vertical > .prev {\r\n left: 0;\r\n top: -100%\r\n}\r\n.carousel-inner.vertical > .next.left,\r\n.carousel-inner.vertical > .prev.right {\r\n top: 0;\r\n}\r\n.carousel-inner.vertical > .active.left {\r\n left: 0;\r\n top: -100%;\r\n}\r\n.carousel-inner.vertical > .active.right {\r\n left: 0;\r\n top: 100%;\r\n}\r\n\r\n\r\n<\/pre>\n
Le r\u00e9sultat est visible sur\u00a0www.ericpoivey.com<\/a><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
je poste rarement de billets sur CSS \/ JQuery \/ Bootstrap … Je cherchais \u00e0 faire un slider bootstrap qui soit \u00e0 la fois \u00ab\u00a0full page\u00a0\u00bb (en \u00ab\u00a0cover\u00a0\u00bb) ET qui slide verticalement. Voici donc la manipulation : Ajouter \u00ab\u00a0vertical\u00a0\u00bb dans…<\/span><\/p>\n
Lire la suite ›<\/a><\/div>\n
<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[],"class_list":["post-375","post","type-post","status-publish","format-standard","hentry","category-jquery"],"_links":{"self":[{"href":"https:\/\/www.demenageur-site.com\/blog\/wp-json\/wp\/v2\/posts\/375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.demenageur-site.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.demenageur-site.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.demenageur-site.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.demenageur-site.com\/blog\/wp-json\/wp\/v2\/comments?post=375"}],"version-history":[{"count":2,"href":"https:\/\/www.demenageur-site.com\/blog\/wp-json\/wp\/v2\/posts\/375\/revisions"}],"predecessor-version":[{"id":377,"href":"https:\/\/www.demenageur-site.com\/blog\/wp-json\/wp\/v2\/posts\/375\/revisions\/377"}],"wp:attachment":[{"href":"https:\/\/www.demenageur-site.com\/blog\/wp-json\/wp\/v2\/media?parent=375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.demenageur-site.com\/blog\/wp-json\/wp\/v2\/categories?post=375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.demenageur-site.com\/blog\/wp-json\/wp\/v2\/tags?post=375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}