Multiple Owl Slider on one page

Developer
Chris
Size
2,996 Kb
Views
8,096
  1. Multiple Owl Slider on one page Previews
  2. Multiple Owl Slider on one page HTML Codes
  3. Multiple Owl Slider on one page CSS Codes
  4. Multiple Owl Slider on one page JS Codes

How do I make an multiple owl slider on one page?

What is a multiple owl slider on one page? How do you make a multiple owl slider on one page? This script and codes were developed by Chris on 01 December 2022, Thursday.

Multiple Owl Slider on one page Previews
IQ Test

Multiple Owl Slider on one page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Multiple Owl Slider on one page</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/32714/owl.theme.css'>
<link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/32714/owl.carousel.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="top-bar"> <div class="container-fluid"> <div class="col-sm-6"> <h2>Logo</h2> </div> <div class="col-sm-6"> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Search</button> </form> </div> </div>
</div>
<div id="owl-demo" class="owl-carousel owl-theme"> <div class="item"><h1>1</h1></div> <div class="item"><h1>2</h1></div> <div class="item"><h1>3</h1></div> <div class="item"><h1>4</h1></div> <div class="item"><h1>5</h1></div> <div class="item"><h1>6</h1></div> <div class="item"><h1>7</h1></div> <div class="item"><h1>8</h1></div> <div class="item"><h1>9</h1></div> <div class="item"><h1>10</h1></div> <div class="item"><h1>11</h1></div> <div class="item"><h1>12</h1></div> <div class="item"><h1>13</h1></div> <div class="item"><h1>14</h1></div> <div class="item"><h1>15</h1></div> <div class="item"><h1>16</h1></div>
</div>
<div id="owl-demo2" class="owl-carousel owl-theme"> <div class="item"><h1>1</h1></div> <div class="item"><h1>2</h1></div> <div class="item"><h1>3</h1></div> <div class="item"><h1>4</h1></div> <div class="item"><h1>5</h1></div> <div class="item"><h1>6</h1></div> <div class="item"><h1>7</h1></div> <div class="item"><h1>8</h1></div> <div class="item"><h1>9</h1></div> <div class="item"><h1>10</h1></div> <div class="item"><h1>11</h1></div> <div class="item"><h1>12</h1></div> <div class="item"><h1>13</h1></div> <div class="item"><h1>14</h1></div> <div class="item"><h1>15</h1></div> <div class="item"><h1>16</h1></div>
</div>
<div id="owl-demo3" class="owl-carousel owl-theme"> <div class="item"><h1>1</h1></div> <div class="item"><h1>2</h1></div> <div class="item"><h1>3</h1></div> <div class="item"><h1>4</h1></div> <div class="item"><h1>5</h1></div> <div class="item"><h1>6</h1></div> <div class="item"><h1>7</h1></div> <div class="item"><h1>8</h1></div> <div class="item"><h1>9</h1></div> <div class="item"><h1>10</h1></div> <div class="item"><h1>11</h1></div> <div class="item"><h1>12</h1></div> <div class="item"><h1>13</h1></div> <div class="item"><h1>14</h1></div> <div class="item"><h1>15</h1></div> <div class="item"><h1>16</h1></div>
</div>
<div class="footer-bar"> <div class="container"> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/32714/owl.carousel.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Multiple Owl Slider on one page - Script Codes CSS Codes

h1, h2, h3 { margin: 0; padding: 0; line-height: 24px;
}
h2 { color: #fff; padding-top: 15px; font-weight: 200;
}
.top-bar { background: #003451; height: 60px;
}
.form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 0;
}
/* Filter Dropdown */
/*Navigation*/
.nav-bar { background: #333;
}
.arrowsWrap { width: 50px; margin: 0 auto;
}
.arrowsWrap .arrows { padding: 15px 0; cursor: pointer; display: inline-block;
}
.arrowsWrap .arrows img { /*Loop Animation*/ transition: 0.70s; -webkit-transition: 0.70s; -moz-transition: 0.70s; -ms-transition: 0.70s; -o-transition: 0.70s; width: 50px; height: 50px;
}
.arrowsWrap .arrows img:hover { opacity: .5;
}
.arrows.open img { /*Rotate Animation*/ transition: 0.70s; -webkit-transition: 0.70s; -moz-transition: 0.70s; -ms-transition: 0.70s; -o-transition: 0.70s; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);
}
.nav { background: #333; padding: 0; cursor: pointer; display: none;
}
.nav ul { list-style: none; display: inline; padding: 0;
}
.nav ul li { /*border-bottom: 1px solid white;*/ padding: 17px; transition: .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: .25s ease-in-out;
}
.nav ul li a { color: #818181; text-decoration: none; display: block; font-size: 20px; font-weight: 300;
}
.nav ul li:hover { background: rgba(255, 255, 255, 0.7); color: #5A5A5A; transition: .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: .25s ease-in-out;
}
.nav-title { margin-right: 500px; text-transform: uppercase; font-size: 20px;
}
/**/
#owl-demo .item{ background: #3498DB; padding: 30px 0px; margin: 0; color: #FFF; border-radius: 0; text-align: center; height: 300px;
}
#owl-demo2 .item{ background: #2980B9; padding: 30px 0px; margin: 0; color: #FFF; text-align: center; border-radius: 0; height: 300px;
}
#owl-demo3 .item{ background: #3498DB; padding: 30px 0px; margin: 0; color: #FFF; text-align: center; border-radius: 0; height: 300px;
}
.customNavigation{ text-align: center;
}
/*use styles below to disable ugly selection*/
.customNavigation a{ -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);
}

Multiple Owl Slider on one page - Script Codes JS Codes

$(document).ready(function () { $("#owl-demo").owlCarousel({ pagination : false, }); $("#owl-demo2").owlCarousel({ pagination : false, }); $("#owl-demo3").owlCarousel({ pagination : false, });
});
Multiple Owl Slider on one page - Script Codes
Multiple Owl Slider on one page - Script Codes
Home Page Home
Developer Chris
Username leetech
Uploaded December 01, 2022
Rating 3
Size 2,996 Kb
Views 8,096
Do you need developer help for Multiple Owl Slider on one page?

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!

Chris (leetech) Script Codes
Name
Responsive business
CSS3 Fullscreen Background Slideshow
A CSS Animated Tooltip
Client list
Parallax scrolling
Split scroll
A Pen by Chris
Triangle bullets
Responsive email template
Just some more hover effects
Create amazing video scripts 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!