JQuery: Code not running when added to Blogger HTML/Javascript gadget - javascript

I've been trying to add a slider (photo and text) to my blogger. I added the code from https://codepen.io/shamim539/pen/GNqLda) into my blogger html/javascript gadget but it doesn't seem to work. The images and text appear in individual images and text in a column, instead of how the slider was supposed to work.
Hope someone can help. What I used:
<!-- BLOG POSTS -->
<section class="testimonials">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="customers-testimonials" class="owl-carousel">
<!--TESTIMONIAL 1 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/dishes-with-healthy-waffles_1220-367.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted at this price</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 1 -->
<!--TESTIMONIAL 2 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/dishes-with-healthy-waffles_1220-367.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted at this price</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 2 -->
<!--TESTIMONIAL 3 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/dishes-with-healthy-waffles_1220-367.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted at this price</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 3 -->
<style>
.testimonials{ position: relative; padding-top: 10px; }
#customers-testimonials{
.item-details{
background-color: #F7F6F6;
color: #4A4A51;
padding: 1.5em 1.5em;
text-align: left;
h5{
margin: 0 0 0.2em;
font-size: 1.5em;
line-height: 1.2em;
span{
color: red;
float: right;
padding-right: 0.2em;
}
}
p{ font-size: 1em; }
}
.item {
text-align: center;
margin-bottom:10px;
}
}
.owl-carousel .owl-nav [class*='owl-'] {
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.owl-carousel .owl-nav [class*='owl-'].disabled:hover {
background-color: #D6D6D6;
}
.owl-carousel {
position: relative;
}
.owl-carousel .owl-next, .owl-carousel .owl-prev {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
position: absolute;
top: 30%;
font-size: 20px;
color: #eee;
border: 1px solid #eee;
text-align: center;
}
.owl-carousel .owl-prev {
left: 20px;
}
.owl-carousel .owl-next {
right: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type='text/javascript'/>
<script>
jQuery(document).ready(function($) {
"use strict";
$('#customers-testimonials').owlCarousel( {
loop: true;
center: true;
items: 3;
margin: 10;
autoplay: false;
dots:true;
nav:true;
autoplayTimeout: 8500;
smartSpeed: 450;
navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'];
responsive: {
0: { items: 1; };
768: { items: 2; };
1170: { items: 3; };
}
});
});
</script>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>owl carousel 2 testimonial slider example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://themes.audemedia.com/html/goodgrowth/css/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
.testimonials {
background-color: #f33f02;
position: relative;
padding-top: 80px;
}
.testimonials:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 30%;
background-color: #ddd;
}
#customers-testimonials .item-details {
background-color: #333333;
color: #fff;
padding: 20px 10px;
text-align: left;
}
#customers-testimonials .item-details h5 {
margin: 0 0 15px;
font-size: 18px;
line-height: 18px;
}
#customers-testimonials .item-details h5 span {
color: red;
float: right;
padding-right: 20px;
}
#customers-testimonials .item-details p {
font-size: 14px;
}
#customers-testimonials .item {
text-align: center;
margin-bottom: 80px;
}
.owl-carousel .owl-nav [class*='owl-'] {
transition: all .3s ease;
}
.owl-carousel .owl-nav [class*='owl-'].disabled:hover {
background-color: #D6D6D6;
}
.owl-carousel {
position: relative;
}
.owl-carousel .owl-next,
.owl-carousel .owl-prev {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
position: absolute;
top: 30%;
font-size: 20px;
color: #fff;
border: 1px solid #ddd;
text-align: center;
}
.owl-carousel .owl-prev {
left: -70px;
}
.owl-carousel .owl-next {
right: -70px;
}
</style>
</head>
<body>
<!-- TESTIMONIALS -->
<section class="testimonials">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="customers-testimonials" class="owl-carousel">
<!--TESTIMONIAL 1 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="">
<div class="item-details">
<h5>Chicken for two Roasted <span>$21</span></h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 1 -->
<!--TESTIMONIAL 2 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/dishes-with-healthy-waffles_1220-367.jpg" alt="">
<div class="item-details">
<h5>Chicken for two Roasted <span>$21</span></h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 2 -->
<!--TESTIMONIAL 3 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/top-view-of-tasty-noodles-with-prawns_1203-1769.jpg" alt="">
<div class="item-details">
<h5>Chicken for two Roasted <span>$21</span></h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 3 -->
<!--TESTIMONIAL 4 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/burguer-with-garnish_1088-72.jpg" alt="">
<div class="item-details">
<h5>Chicken for two Roasted <span>$21</span></h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 4 -->
<!--TESTIMONIAL 5 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/delicious-pastry-with-chicken_1203-1616.jpg" alt="">
<div class="item-details">
<h5>Chicken for two Roasted <span>$21</span></h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 5 -->
</div>
</div>
</div>
</div>
</section>
<!-- END OF TESTIMONIALS -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/owl.carousel.min.js'></script>
<script>
jQuery(document).ready(function($) {
"use strict";
$('#customers-testimonials').owlCarousel( {
loop: true,
center: true,
items: 3,
margin: 30,
autoplay: true,
dots:true,
nav:true,
autoplayTimeout: 8500,
smartSpeed: 450,
navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
responsive: {
0: {
items: 1
},
768: {
items: 2
},
1170: {
items: 3
}
}
});
});
</script>
</body>
</html>
The codepen link gives you SCSS codes that needs to be compiled into CSS. Both are different and works accordingly. So just copy
paste HTML and JS parts here.
You have NOT INCLUDED EXTERNAL CSS links that are needed to this design.
Please take the tour and learn how to ask a good question. Thank you :)

Related

Having multiple Owl Carousels on a Shopify page

I'm writing a homepage for my business website. I encountered a problem after inserting a second Owl Carousel. The second slider is showing up fine but first one somehow disappeared. When I removed the second Carousel, the first one came back. I figured it has to do with giving the divs specific IDs or classes but no matter how I tried I can't seem to make them work.
I tried giving them specific class such as
div class="owl-one owl-carousel owl-theme" and div class="owl-two owl-carousel owl-theme"
As well as ids
div id="owl-one" class="owl-carousel owl-theme"
and div id="owl-two" class="owl-carousel owl-theme"
And changed the script to
$('.owl-one .owl-slideImg .owl-theme').owlCarousel({
$('.owl-two .owl-carousel').owlCarousel({
As well as
$('#owl-one .owl-slideImg .owl-theme').owlCarousel({
$('#owl-two .owl-carousel').owlCarousel({
What am I doing wrong? Please help!
Here is the first slider code:
<!DOCTYPE html>
<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/bootstrap-grid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<style>
.owl-slideImg .owl-nav div{
position: absolute !important;
width: 25px !important;
height: 25px !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
top: 40%;
}
.owl-slideImg .owl-prev {
left: -55px;
opacity: .65;
background: url(https://www.panpuri.com/asset/frontend/images/right-chevron.svg) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 20px 20px !important;
transform: rotate(180deg);
color: rgba(0, 0, 0, 0) !important;
transition: .33s all ease-out;
}
.owl-slideImg .owl-next {
right: -55px;
opacity: .65;
background: url(https://www.panpuri.com/asset/frontend/images/right-chevron.svg) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 20px 20px !important;
color: rgba(0, 0, 0, 0) !important;
transition: .33s all ease-out;
}
.owl-slideImg .owl-prev:hover{
opacity: 1;
}
.owl-slideImg .owl-next:hover{
opacity: 1;
}
#media only screen and (max-width: 991px) { /* MOBILE */
.owl-slideImg .slide-img{
height: 250px;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 100% auto !important;
}
.owl-slideImg .slide-box-text div{
padding: 40px;
}
.owl-slideImg .box-icon-svg{
display: flex;
justify-content: end;
}
.box-icon-svg img{
max-width: 30px;
}
.container-fluid{
padding-bottom: 20rem;
margin-bottom: 20rem;
}
.owl-slideImg .owl-nav div{
top: 20%;
}
.owl-slideImg .owl-prev {
left: 0 !important;
}
.owl-slideImg .owl-next {
right: 0 !important;
}
}
#media only screen and (min-width: 992px) { /* PC */
.owl-slideImg .slide-box-text{
height:100%;
display: flex;
justify-content: center;
justify-items: center;
align-items: center;
width:100%;
}
.owl-slideImg .slide-img{
height: 350px;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 100% auto !important;
}
.owl-slideImg .slide-box-text div{
width: 60%;
}
.owl-slideImg .box-icon-svg{
position: absolute;
right: 0;
bottom: 0;
display: flex;
margin-right: 40px;
margin-bottom: 20px;
}
.box-icon-svg img{
max-width: 60px !important;
margin-top: -20px;
}
.owl-slideImg .owl-item{
width: 100%;
}
.service-header{
text-align: center;
justify-content: center;
}
.container-fluid{
padding-bottom: 20rem;
margin-bottom: 20rem;
}
}
</style>
<main>
<br>
<br>
<br>
<h2 class="service-header">our service</h2>
<div class="col p-5">
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-10 col-12 owl-slideImg ">
<div class="owl-carousel owl-theme">
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Installation_0702da65-4ad7-42df-9ea6-bca10d7c541a.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
Given our versatility and neat craftsmanship in stone installation, we have been providing our service to various leading construction and estate companies in Thailand.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">installation</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Installicon.svg?v=1646822679" alt="">
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Supply.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
With connections and credible sources from both domestic and oversea quarries, we can supply great quality stones that meet your needs and specifications.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">supply</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Supplyicon.svg?v=1646822694" alt="">
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Restore.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
We let our designers draft up a digital rendered image beforehand for any customisation and specifications such as landscaping and counter tops.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">design</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Designicon.svg?v=1646822671" alt="">
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Design.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
With high quality machines, we can provide any finishing and resurfacing process including polishing and honing.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">restore</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Restoreicon.svg?v=1646822686" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<br>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".owl-slideImg .owl-theme").owlCarousel({
center: false,
loop: true,
autoplay: true,
autoplayTimeout: 50000,
nav: true,
dots: true,
items: 1,
margin: 40
});
});
</script>
And this is the second slider code:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<br>
<div class="logoslider">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo5.jpg" alt="The Ritz Carlton">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo2.jpg" alt="Phulaybay">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo6.jpg" alt="Silpakorn">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo3.jpg" alt="Property Perfect">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo1.jpg" alt="Thames Valley">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo4.jpg" alt="The Mall Group">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo7.jpg" alt="Pirom At Vineyard">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo8.jpg" alt="NYE Estate">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo13.jpg" alt="Balcony Thailand">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo10.jpg" alt="Harbor Laemchabang">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo12.jpg" alt="Belle Rama 9">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo9.jpg" alt="Major Development">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo11.jpg" alt="Gazebo Garden">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo15.jpg" alt="360 Pano">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo14.jpg" alt="Anantarakiri">
</div>
</div>
</div>
<br>
<br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop: true,
autoplay: true,
nav: false,
dots: false,
margin: 40,
autoplayTimeout: 1500,
responsive:{
0:{
items:4
},
600:{
items:8
},
1000:{
items:8
}
}
})
</script>
</body>
<style>
.logoslider{
display: flex;
width: 80%;
justify-content: center;
justify-items: center;
align-items: center;
margin-left: auto;
margin-right: auto;
}
</style>

Try like this
Owl Carousel One
var owl_carousel_one = $('.owl-carousel-one');
owl_carousel_one.owlCarousel({
loop: true,
margin: 30,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
smartSpeed: 1000,
responsive: {
0: {
items: 4
},
600: {
items: 8
},
1000: {
items: 8
}
}
});
Owl Carousel Two
var owl_carousel_two = $('.owl-carousel-two');
owl_carousel_two.owlCarousel({
loop: true,
margin: 30,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
smartSpeed: 1000,
responsive: {
0: {
items: 4
},
600: {
items: 8
},
1000: {
items: 8
}
}
});
Just use these unique classes (.owl-carousel-one, .owl-carousel-two, and so on...) for each owl carousel HTML element. No need for any ID.

How can I center align the carousel images and text correctly? [duplicate]

This question already has answers here:
Center image using text-align center?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I have a carousel that is working perfectly fine as I want but I'm having trouble center aligning the image and text properly. It looks fine in small screen but is not aligned in bigger screens or smaller screens.
Also the previous and next button arrows are not aligned in the center of the background circle aswell.
HTML
<div>
<h3 style="text-align:center; padding:30px; padding-bottom:10px;">Trending now</h3>
<!-- Multi Carousel -->
<div class="prod-slider-container">
<div class="inner-container">
<div class="owl-carousel">
<div class="item">
<img src="https://www2.hm.com/content/dam/hm-magazine-2020/featured-fashion/20_13_A_trend_bildspel_1.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Jackets & Coats</span>
</p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2F33%2F9e%2F339e3549ec41eef34883a4fbe73e8501c36764fb.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bladies_cardigansjumpers_cardigans%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Cardigans &<br> Sweaters</span>
</p>
</div>
<div class="item">
<img src="https://cdna.lystit.com/photos/56a1-2014/11/06/hm-blue-jumper-in-a-mohair-blend-product-1-25065199-0-150443488-normal.jpeg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Clothes</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/736x/32/00/a8/3200a8617dfbc6139b8251a36d5118de.jpg">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Boys 11/2-10<br> years</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmprod?hmver=0&set=quality[79],source[/environment/2016/8EZ_0117_008R.jpg],width[4054],height[4740],x[549],y[438],type[FASHION_FRONT]&call=url[file:/product/main]">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Girls 11/2-10<br> years</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/736x/b3/21/bd/b321bd9d618ee5439cd7218f9a543704.jpg">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Hoodies &<br> Sweatshirts</span></p>
</div>
<div class="item">
<img src="https://media1.popsugar-assets.com/files/thumbor/Ol-YWVWUQnVmpEjhoKL6eZK0Kfo/fit-in/2048xorig/filters:format_auto-!!-:strip_icc-!!-/2014/09/11/879/n/24155406/6877ea140db7a0db_thumb_temp_image22153611410465627/i/HM-Newborn-Clothes.jpg">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Newborn 0-9<br>months</span></p>
</div>
<div class="item">
<img src="https://mk0stylisheve1cal1r6.kinstacdn.com/wp-content/uploads/2011/12/HM-Jumpers-and-Cardigans-for-Men_01.jpg">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Cardigans &<br> Sweaters</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2F0e%2F50%2F0e50030ec7575845e95ead7a4046c4522544852d.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bmen_trousers_dressed%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Pants</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/originals/b7/2a/50/b72a5020325b27dd6c053223703ee04b.jpg">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Baby Exclusive <br> 0m-4 years</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2Fe3%2F6c%2Fe36c9e916fdfa4b3896bfe9992889b7fa4a827ca.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bladies_cardigansjumpers_hoodiessweatshirts%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Hoodies & <br> Sweatshirts</span></p>
</div>
<div class="item">
<img src="https://media1.popsugar-assets.com/files/thumbor/18fWRKJF__pohskeGtu_P3dCSRE/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2020/01/08/883/n/1922564/28a69c26b18fd4bf_netimgaMezvq/i/HM-Paper-bag-Pants.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Pants</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/originals/14/ff/b0/14ffb09b1bcef167ed28a9624748e032.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Accessories</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=width[800],quality[80],options[limit]&source=url[https://www2.hm.com/content/dam/men_s02/september_2020/3132b/3132B-1x1-v41-the-casual-edit.jpg]&scale=width[global.width],height[15000],options[global.options]&sink=format[jpg],quality[global.quality]">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Jackets & <br>Coats</span></p>
</div>
<div class="item">
<img src="https://media1.popsugar-assets.com/files/thumbor/ornsuB5wU0zsOvtIq06LKYZaN0o/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2019/06/05/932/n/1922564/201a10c4095b52d1_netimgVaH6Nm/i/HM-Linen-Shirt.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Shirts &<br> blouses</span></p>
</div>
<div class="item">
<img src="https://decoholic.org/wp-content/uploads/2020/09/HM-Home-fall-2020-2.jpg">
<p class="carosueltitletxt">
H&M Home<br>
<span class="carosueltxt">New Home &<br> Interior</span></p>
</div>
</div>
</div>
</div>
CSS
/*carousel*/
.prod-slider-container {
position: relative;
font-family: font-awesome;
margin-left: 10%;
margin-right: 10%;
}
.owl-buttons {
background-color: transparent;
border: 0px none transparent;
width: 9%;
}
.owl-prev,
.owl-next {
position: absolute;
top: 37px;
}
i.fa {
cursor: pointer;
font-size: 10px;
padding-top: 0;
height: 0;
width: 0px;
color: rgba(0, 0, 4, 0.5);
}
.owl-perv {
left: -2%;
}
.owl-next {
right: 5.1%;
}
.item img {
margin-left: 10px;
margin-right: 10px;
width: 100px;
height: 100px;
border-radius: 50px;
background: #222222;
object-fit: cover;
}
.carosueltitletxt{
font-family:helvetica;
text-align:center;
color:#555555;
font-size:11px;
font-weight:bold;
}
.carosueltxt{
font-family:helvetica;
text-align:center;
color:#222222;
}
.d4-container img {
position: relative;
margin-left: 10%;
margin-right: 10%;
margin-top: 20px;
display: block;
width: 80%;
height: 400px;
object-fit: cover;
background: gray;
}
JQuery
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
items: 8,
pagination:false,
itemsDesktop: [1199, 5],
itemsDesktopSmall: [979, 5],
navigation: true,
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
});
});

Hi can you please try with this and let me know thank you.
.prod-slider-container .item a {
display: block;
margin: 0 auto;
float: none;
text-align: center;
}

To center the texts and the images, add text-align: center; to the wrapper element which is .item in this case.
You can add this text-align: center; to the second parent .owl-carousel or the third .inner-container also, that would make all the texts and images inside centered.
And for .owl-next & .owl-prev honestly, if you can't provide the live example of this carousel, I can't be specific about the solution, this is a simple try based on your provided code, hope this would help you find the solution-
.inner-container {
position: relative;
}
.inner-container .owl-prev,
.inner-container .owl-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.owl-prev {left: 15px}
.owl-next {right: 15px}

just use display: flex on .item class and change the value of justify-content and align items to fit your need.
like this:
.item{
display: flex;
justify-content: center;
align-items: space-around;
}

How to create a polling system in HTML for a movie review website?

How do I creating a voting system that uses checkboxes for 1 star, 2 stars, 3 stars, 4 stars and 5 stars. According to what the user picks it will generate an average user rating from the given votes and display the number of stars required.
I am not sure where exactly to start in terms of gathering the input from the user etc...This is all the code I have for now
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
margin: 0 auto; /* Center website */
max-width: 800px; /* Max width */
padding: 20px;
}
.heading {
font-size: 25px;
margin-right: 25px;
}
.fa {
font-size: 25px;
}
.checked {
color: orange;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: right;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 100%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Individual bars */
.bar-5 {width: 60%; height: 18px; background-color: #4CAF50;}
.bar-4 {width: 30%; height: 18px; background-color: #2196F3;}
.bar-3 {width: 10%; height: 18px; background-color: #00bcd4;}
.bar-2 {width: 4%; height: 18px; background-color: #ff9800;}
.bar-1 {width: 15%; height: 18px; background-color: #f44336;}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
#media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
</style>
</head>
<body>
<span class="heading">User Rating</span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<p>4.1 average based on 254 reviews.</p>
<hr style="border:3px solid #f1f1f1">
<div class="row">
<div class="side">
<div>5 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-5"></div>
</div>
</div>
<div class="side right">
<div>150</div>
</div>
<div class="side">
<div>4 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-4"></div>
</div>
</div>
<div class="side right">
<div>63</div>
</div>
<div class="side">
<div>3 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-3"></div>
</div>
</div>
<div class="side right">
<div>15</div>
</div>
<div class="side">
<div>2 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-2"></div>
</div>
</div>
<div class="side right">
<div>6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar-1"></div>
</div>
</div>
<div class="side right">
<div>20</div>
</div>
</div>
</body>
</html>

Usually a 5-star polling system will require a database and a backend programming language. i.e. Mysql and PHP.
Here is an example:
https://www.script-tutorials.com/how-to-create-own-voting-system/

Sections appears smaller than intended

I'm having an issue with HTML sections. As shown in the screenshot the blue spot are the sections and they should include the grey space. The white space is what lays inside the section tags in HTML.
The problem was discovered when trying to add some space between each section, but everything we tried it wouldn't do anything.
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");
let lastId;
let cur = [];
// This should probably be throttled.
// Especially because it triggers during smooth scrolling.
// https://lodash.com/docs/4.17.10#throttle
// You could do like...
// window.addEventListener("scroll", () => {
// _.throttle(doThatStuff, 100);
// });
// Only not doing it here to keep this Pen dependency-free.
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (
section.offsetTop <= fromTop &&
section.offsetTop + section.offsetHeight > fromTop
) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
html {
scroll-behavior: smooth;
}
body {
margin: 0;
display: grid;
grid-template-columns: min-content 1fr;
font-family: 'Roboto';
background-color: grey;
/* this breaks position sticky in Firefox */
/* overflow-x: hidden; */
}
header {
grid-column: 1 / 3;
background: #5D5C61;
background-image: url("../Assets/Images/headerImage.jpg");
image-resolution: 1200x1400;
color: white;
padding: 4rem;
text-align: center;
font-family: 'Chivo';
font-size: 22px;
}
header a {
padding-right: 20px;
color: white;
text-decoration: underline;
}
header h1 {
color: #fb6542;
}
nav {
white-space: nowrap;
background: #37474F;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Only stick if you can fit */
#media (min-height: 300px) {
nav ul {
position: sticky;
top: 0;
}
}
nav ul li a {
display: block;
padding: 0.5rem 1rem;
color: white;
font-size: 20px;
text-decoration: none;
}
nav ul li a.current {
background: #51656E;
}
main {
padding-top: -30px;
}
section {
padding: 2rem;
margin: 0 0 10% 0;
background-color: lightblue;
display: block;
}
footer {
grid-column: 1 / 3;
background: #252E39;
padding: 5rem 1rem;
}
a {
color: black;
text-decoration: none;
}
main a {
display: inline-block;
padding-bottom: 20px;
}
a:hover {
color: #6B7B83;
text-decoration: underline;
}
a:active {
color: #6B7B83;
}
.socialIcon {
height: 20px;
width: 20px;
}
#socialMedia {
text-align: center;
}
.CALink:hover {
color: #202F36;
}
.container {
width: 70%;
height: 100%;
float: left;
display: inline-block;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-group {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: left;
box-shadow: 0px 1px 2px rgba(0.2, 0.2, 0, 0.2);
padding: 30px;
width: 100%;
height: 100%;
margin: 1%;
align-items: center;
}
.containerRight {
width: 20%;
height: 20%;
float: right;
display: inline-block;
flex-wrap: wrap;
font-family: 'Alegreya Sans', sans-serif;
}
.control-groupRight {
display: inline-block;
vertical-align: top;
background: #FFFFFF;
text-align: center;
box-shadow: 0px 1px 2px rgba(0.2, 0.2, 0, 0.2);
width: 100%;
height: 100%;
align-items: center;
margin: 4% 1% 1% 1%;
}
.navTitle {
text-decoration: underline;
}
.endOfModule {
margin-bottom: 20px;
}
.sectionHolder {
width: 100%;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css"/>
<link href="CSS/linkHover.css" rel="stylesheet" type="text/css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="icon" href="Assets/Images/faviconTTT.png"/>
<title>Silverflame</title>
</head>
<body>
<header>
<div id="socialMedia">
<img class="socialIcon" src="Assets/Images/mark-github.svg" alt="logo" />
<img class="socialIcon" src="Assets/Images/twitterSVG.svg" alt="twitter logo"/>
</div>
<h1>SilverFlame</h1>
<h5>Jesper Christensen</h5>
<a target="headerLink" href="https://www.thesilverflame.dk/">Home</a>
<a target="headerLink" href="https://www.thesilverflame.dk/CA.html">CA</a>
<a target="headerLink" href="">About</a>
Contact
</header>
<nav>
<ul>
<li>Module 1</li>
<li>Maven</li>
<li>Network and HTTP</li>
<li>JavaScript & CA1</li>
<li>Module 2</li>
<li>ORM with JPA</li>
<li>Rest webservices with JAX-RS</li>
<li>JavaScript</li>
<li>CA2</li>
<li>Module 3</li>
<li>SYS 1</li>
<li>?</li>
<li>SYS 2</li>
<li>Module 4</li>
<li>SPA with React (TBD)</li>
<li>React routing, Security and RN</li>
<li>CA3 (TBD)</li>
<li>Module 5</li>
<li>Project - Week 1</li>
<li>Project - Week 2</li>
<li>Project - Week 3</li>
</ul>
</nav>
<main>
<section id="section-1">
<div class="container">
<div class="control-group">
<h2>Module 1 - Maven, Test & Network</h2>
</div>
</div>
</section>
<section id="section-2">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Maven</h2>
<div class="tooltip">
Simple Calculator
<span class="tooltiptext">Github link</span>
</div>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-3">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Network & HTTP</h2>
Exercises - Network stack
<br>
Exercise HTTP
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-4">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>JavaScript and CA1</h2>
The JS array
<br>
JavaScript Exercice 1
<br>
Course Assignment 1
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-5">
<div class="container">
<div class="control-group">
<h2>Module 2 - Webstack</h2>
</div>
</div>
</section>
<section id="section-6">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>ORM with JPA</h2>
<h2>Study Point Exercise 3 - JPA, JPQL and Testing </h2>
<h3>Part 1</h3>
Exercise - JPA Entity Mappings - 1
<br>
Exercise - Java Persistence - Querying - 3
<h3>Part 2</h3>
Studypoint part two
<h3>Part 3</h3>
Exam Preparation Exercise on relations and queries
<br>
Exam Preparation Exercise on JPQL
<br>
Object Relational Mapping and Inheritance
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-7">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Rest webservices with JAX-RS</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-8">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>JavaScript</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-9">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>Course Assignment 2</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
<section id="section-10">
<div class="sectionHolder">
<div class="container">
<div class="control-group">
<h2>ORM with JPA</h2>
<p>Add content</p>
</div>
</div>
<div class="containerRight">
<div class="control-groupRight">
<h5>Learning Goals</h5>
<img class="docsIcon" src="https://img.icons8.com/color/50/000000/google-docs.png" alt="google docs icon" />
</div>
</div>
</div>
</section>
</main>
<footer>
©2022
</footer>
<script src="Assets/JS/hoverEffect.js" type="text/javascript"></script>
<script src="Assets/JS/frontpage.js" type="text/javascript"></script>
</body>
</html>

You are applying a float to the container which takes the item out of the document flow. Consider using flexbox instead of floats for layout.
.sectionHolder {
width: 100%;
margin: auto;
display: flex;
}
.container {
flex: 1 1 70%;
height: 100%;
font-family: 'Alegreya Sans', sans-serif;
}
.containerRight {
flex: 0 0 20%;
height: 20%;
font-family: 'Alegreya Sans', sans-serif;
}

This is a well-known issue when working with floated content. The height of the section elements are not being properly calculated because the floated content is not in the normal document flow.
Add overflow:auto; to the section elements which should correct the issue by forcing the rendering engine to recalculate the height of the element and once it does that, it should recognize the child content and factor it in.
Here's more on the issue and other solutions.

My JS is not working with my html/css. Not sure why. (Console error 'ReferenceError: $ is not defined')

I am trying to create a content slider, and am having difficulties with it functioning appropriately. Specifically when testing locally the aspect that is not working is: (When you click the arrows left or right the current-slide fades out and fades back in but the slide content does not switch to the next block of content.)
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<html lang="en-US">
<meta charset="UTF-8">
<title>PLACEHOLDER</title>
<meta name"keywords" content="PLACEHOLDER" />
<meta name"description" content="PLACEHOLDER" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="code.js"></script>
<link type="text/css" rel="stylesheet" href="style2.css" />
</head>
<body>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 id="welcome">FIRST SLIDE HEADER</h1>
<div id="img1">
<img src="######.png" width="450" height="250" />
</div>
<div id="intro">
<p>FIRST SLIDE CONTENT</p </div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Slide2</h1>
<p>Slide 2 stuff.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 3</h1>
<h2>Slide3</h2>
<p>Slide3 content</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 4</h1>
<p>slide 4 content</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="ARROW LEFT IMAGE">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="ARROW RIGHT IMAGE">
</a>
</div>
Here is my JS:
var main = function () {
$('.arrow-next').click(function () {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next()
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function()
{
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev()
if(prevSlide.length == 0)
{
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);
HERE IS MY CSS(Just to tie it all together):
.slider {
position: relative;
width: 50%;
height: 470px;
margin-left: 25%;
border-bottom: 1px solid #ddd;
margin-top: -8%;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
margin-top: 30%;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
NOTE: I only put the sections of html/js/css that matter for this case. And I used placeholders for some text and images. On my local machine those placeholders are replaced with correct content.

if you look at the HTML closely, you'll see that the slider div's are not positioned properly. all the other div's with the class '.slide' are enclosed inside <div class="slide active-slide"> whereas they should be independent of each other.
the javascript code is not able to find the next() slide since they're all contained in one single parent which is the 'active-slide'
you need to update your HTML to the following
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 id="welcome">FIRST SLIDE HEADER</h1>
<div id="img1">
<img src="######.png" width="450" height="250" />
</div>
<div id="intro">
<p>FIRST SLIDE CONTENT</p </div>
</div>
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Slide2</h1>
<p>Slide 2 stuff.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 3</h1>
<h2>Slide3</h2>
<p>Slide3 content</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 4</h1>
<p>slide 4 content</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="ARROW LEFT IMAGE">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="ARROW RIGHT IMAGE">
</a>
</div>
here's a working JSFIDDLE for the same. hope this helps

You just need to include the jQuery library from here: http://jquery.com/download/

You will get this error if you haven't included jquery file or you are getting conflicts in jquery.
ReferenceError: $ is not defined
Add following in Head section of your code:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Categories

Resources