Responsive full width carousel with owl-carousel

Developer
Mario Loncarek
Size
4,226 Kb
Views
105,248
  1. Responsive full width carousel with owl-carousel Previews
  2. Responsive full width carousel with owl-carousel HTML Codes
  3. Responsive full width carousel with owl-carousel CSS Codes
  4. Responsive full width carousel with owl-carousel JS Codes

How do I make an responsive full width carousel with owl-carousel?

Responsive carousel(slider) in full width with touch support using owl-carousel and ionicons. What is a responsive full width carousel with owl-carousel? How do you make a responsive full width carousel with owl-carousel? This script and codes were developed by Mario Loncarek on 03 July 2022, Sunday.

Responsive full width carousel with owl-carousel Previews
IQ Test

Responsive full width carousel with owl-carousel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive full width carousel with owl-carousel</title> <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="carousel-container"> <div id="slider-carousel" class="owl-carousel"> <div class="item"> <a class="hoverfx" href="#"> <div class="figure"> This is text when image is hovered </div> <div class="overlay"> </div> <img src="http://dummyimage.com/350x300/f0f0f0/333"> </a> <h4>HEADING</h4> <h6>Sub heading</h6> </div> <div class="item"> <a class="hoverfx" href="#"> <div class="figure"> This is text when image is hovered </div> <div class="overlay"> </div> <img src="http://dummyimage.com/350x300/f0f0f0/333"> </a> <h4>HEADING</h4> <h6>Sub heading</h6> </div> <div class="item"> <a class="hoverfx" href="#"> <div class="figure"> This is text when image is hovered </div> <div class="overlay"> </div> <img src="http://dummyimage.com/350x300/f0f0f0/333"> </a> <h4>HEADING</h4> <h6>Sub heading</h6> </div> <div class="item"> <a class="hoverfx" href="#"> <div class="figure"> This is text when image is hovered </div> <div class="overlay"> </div> <img src="http://dummyimage.com/350x300/f0f0f0/333"> </a> <h4>HEADING</h4> <h6>Sub heading</h6> </div> <div class="item"> <a class="hoverfx" href="#"> <div class="figure"> This is text when image is hovered </div> <div class="overlay"> </div> <img src="http://dummyimage.com/350x300/f0f0f0/333"> </a> <h4>HEADING</h4> <h6>Sub heading</h6> </div> <div class="item"> <a class="hoverfx" href="#"> <div class="figure"> This is text when image is hovered </div> <div class="overlay"> </div> <img src="http://dummyimage.com/350x300/f0f0f0/333"> </a> <h4>HEADING</h4> <h6>Sub heading</h6> </div> </div> <div class="customNavigation"> <a class="btn gray prev"><i class="icon ion-ios-arrow-left"></i></a> <a class="btn gray next"><i class="icon ion-ios-arrow-right"></i></a> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive full width carousel with owl-carousel - Script Codes CSS Codes

* { box-sizing: border-box;
}
/* *	Core Owl Carousel CSS File *	v1.3.3 */
/* clearfix */
.owl-carousel .owl-wrapper:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; line-height: 0;
}
/* display none until init */
.owl-carousel { position: relative; display: none; width: 100%; -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper { position: relative; display: none; -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer { position: relative; overflow: hidden; width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item { float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div { cursor: pointer;
}
.owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* mouse grab icon */
.grabbing { cursor: url(../images/grabbing.png) 8 8, move;
}
/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;
}
.owl-theme .owl-controls { margin-top: 10px; text-align: center;
}
/* * Owl Carousel CSS3 Transitions * v1.3.2 */
.owl-origin { -webkit-perspective: 1200px; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%; -moz-perspective: 1200px; -moz-perspective-origin-x: 50%; -moz-perspective-origin-y: 50%; perspective: 1200px;
}
/* fade */
.owl-fade-out { z-index: 10; -webkit-animation: fadeOut .7s both ease; -moz-animation: fadeOut .7s both ease; animation: fadeOut .7s both ease;
}
.owl-fade-in { -webkit-animation: fadeIn .7s both ease; -moz-animation: fadeIn .7s both ease; animation: fadeIn .7s both ease;
}
/* backSlide */
.owl-backSlide-out { -webkit-animation: backSlideOut 1s both ease; -moz-animation: backSlideOut 1s both ease; animation: backSlideOut 1s both ease;
}
.owl-backSlide-in { -webkit-animation: backSlideIn 1s both ease; -moz-animation: backSlideIn 1s both ease; animation: backSlideIn 1s both ease;
}
/* goDown */
.owl-goDown-out { -webkit-animation: scaleToFade .7s ease both; -moz-animation: scaleToFade .7s ease both; animation: scaleToFade .7s ease both;
}
.owl-goDown-in { -webkit-animation: goDown .6s ease both; -moz-animation: goDown .6s ease both; animation: goDown .6s ease both;
}
/* scaleUp */
.owl-fadeUp-in { -webkit-animation: scaleUpFrom .5s ease both; -moz-animation: scaleUpFrom .5s ease both; animation: scaleUpFrom .5s ease both;
}
.owl-fadeUp-out { -webkit-animation: scaleUpTo .5s ease both; -moz-animation: scaleUpTo .5s ease both; animation: scaleUpTo .5s ease both;
}
/* Keyframes */
/*empty*/
@-webkit-keyframes empty { 0% { opacity: 1 }
}
@-moz-keyframes empty { 0% { opacity: 1 }
}
@keyframes empty { 0% { opacity: 1 }
}
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; }
}
@-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; }
}
@-webkit-keyframes backSlideOut { 25% { opacity: .5; -webkit-transform: translateZ(-500px); } 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
}
@-moz-keyframes backSlideOut { 25% { opacity: .5; -moz-transform: translateZ(-500px); } 75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
}
@keyframes backSlideOut { 25% { opacity: .5; transform: translateZ(-500px); } 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
}
@-webkit-keyframes backSlideIn { 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; -webkit-transform: translateZ(-500px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
}
@-moz-keyframes backSlideIn { 0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; -moz-transform: translateZ(-500px); } 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); }
}
@keyframes backSlideIn { 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; transform: translateZ(-500px); } 100% { opacity: 1; transform: translateZ(0) translateX(0); }
}
@-webkit-keyframes scaleToFade { to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleToFade { to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleToFade { to { opacity: 0; transform: scale(.8); }
}
@-webkit-keyframes goDown { from { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes goDown { from { -moz-transform: translateY(-100%); }
}
@keyframes goDown { from { transform: translateY(-100%); }
}
@-webkit-keyframes scaleUpFrom { from { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleUpFrom { from { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleUpFrom { from { opacity: 0; transform: scale(1.5); }
}
@-webkit-keyframes scaleUpTo { to { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleUpTo { to { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleUpTo { to { opacity: 0; transform: scale(1.5); }
}
/* Styling Next and Prev buttons */
.owl-theme .owl-controls .owl-buttons div { display: inline-block; margin: 5px; padding: 3px 10px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: #869791; color: #FFF; font-size: 12px; opacity: 0.5; filter: Alpha(Opacity=50); /*IE7 fix*/ zoom: 1; *display: inline; /*IE7 life-saver */
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover { text-decoration: none; opacity: 1; filter: Alpha(Opacity=100); /*IE7 fix*/
}
/* Styling Pagination*/
.owl-theme .owl-controls .owl-page { display: inline-block; zoom: 1; *display: inline; /*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span { display: block; margin: 5px 7px; width: 12px; height: 12px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #869791; opacity: 0.5; filter: Alpha(Opacity=50); /*IE7 fix*/
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span { opacity: 1; filter: Alpha(Opacity=100); /*IE7 fix*/
}
/* If PaginationNumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers { padding: 2px 10px; width: auto; height: auto; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; color: #FFF; font-size: 12px;
}
/* preloading images */
.owl-item.loading { min-height: 150px; background: url(../images/AjaxLoader.gif) no-repeat center center
}
/* CUSTOM USER OPTIONS */
.carousel-container { width: 100%; margin-top: 50px;
}
.item { margin: 0; border-right: 1px solid #333; background: #333; color: #f0f0f0; text-align: center; font-family: 'Montserrat', sans-serif;
}
.item img { width: 100%;
}
.item h4 { margin-top: 20px; color: #f0f0f0;
}
.item h6 { padding-bottom: 20px; color: #f0f0f0;
}
.customNavigation { margin-top: -25px; text-align: center;
}
.customNavigation .btn { margin: 0; position: relative; display: inline-block; overflow: visible; padding: 0.8em 1.1em; width: 50%; float: left; border: 0; box-shadow: none; color: #fff; text-transform: uppercase; text-shadow: none; font-size: 20px; cursor: crosshair; -webkit-transition: all .1s ease-in 0s; -moz-transition: all .1s ease-in 0s; -o-transition: all .1s ease-in 0s; transition-property: all .1s ease-in 0s; -webkit-font-smoothing: antialiased; background: #333;
}
.customNavigation .btn:hover { background: #222;
}
.hoverfx { position: relative; display: block; overflow: hidden; text-align: center;
}
.hoverfx img { position: absolute; left: 0; width: 100%;
}
.hoverfx:before { display: inline-block; padding-top: 80%; content: ''; vertical-align: middle;
}
.hoverfx .figure { position: relative; z-index: 2; display: inline-block; padding: 12px; max-width: 60%; border: 3px solid #e9e9e9; color: #ecf0f1; vertical-align: middle; text-transform: uppercase; font-size: 1rem; opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition-property: all .3s ease;
}
.hoverfx .overlay { position: absolute; top: 0; z-index: 1; padding: 50%; background: #333; opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition-property: all .3s ease;
}
.item:hover .figure,
.item:hover .overlay { opacity: 1;
}

Responsive full width carousel with owl-carousel - Script Codes JS Codes

 $(document).ready(function() { var owl = $("#slider-carousel"); owl.owlCarousel({ items: 4, itemsDesktop: [1000, 4], itemsDesktopSmall: [900, 2], itemsTablet: [600, 1], itemsMobile: false, pagination: false }); $(".next").click(function() { owl.trigger('owl.next'); }) $(".prev").click(function() { owl.trigger('owl.prev'); }) });
Responsive full width carousel with owl-carousel - Script Codes
Responsive full width carousel with owl-carousel - Script Codes
Home Page Home
Developer Mario Loncarek
Username riogrande
Uploaded July 03, 2022
Rating 3
Size 4,226 Kb
Views 105,248
Do you need developer help for Responsive full width carousel with owl-carousel?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mario Loncarek (riogrande) Script Codes
Name
Learning ajax
Css3 only dropdown menu
Responsive navigation mobile menu toggle
Responsive overlay menu - columns menu example
Buttons with icons made easy - with font awesome
Responsive overlay menu - rows menu example
Flat css3 modern buttons
Responsive overlay menu framework
Responsive overlay menu - grid example
Responsive overlay menu navigation
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!