I've looked for some info on this and found some answers, but when I apply it to my code, nothing happens. When I resize my window, the carousel does not resize, instead it gets cut off on the right side. Any ideas on how to make it scale properly?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<!-- Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 3000
});
});
</script>
</head>
<body>
<div class="container">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src="img/guy.png" alt="Wedge Tire"></div>
<div class="item"><img src="img/front.png" alt="Wedge Tire"></div>
<div class="item"><img src="img/fleet.png" alt="Wedge Tire"></div>
<div class="item"><img src="img/inside.png" alt="Wedge Tire"></div>
<div class="item"><img src="img/more_tires.png" alt="Wedge Tire"></div>
<div class="item"><img src="img/tires.png" alt="Wedge Tire"></div>
<div class="item"><img src="img/truck.png" alt="Wedge Tire"></div>
<div class="item"><img src="img/trucks.png" alt="Wedge Tire"></div>
<div class="item"><img src="img/warehouse.png" alt="Wedge Tire"></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</div><!--CONTAINER-->
</body>
</html>
Verified my above comment. <link href="css/bootstrap-responsive.css" rel="stylesheet"> needs to go after <link href="css/bootstrap.min.css" rel="stylesheet">.
Related
I am using bootstrap 4 and jquery 3.5.1 at the same time.
the slider seems doesn't work at all. please help.
<head>
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/slick.css">
</head>
<section class="slider-area slider">
<div>
<img src="assets/index/languages/france.png">
</div>
<div>
<img src="assets/index/languages/germany.png">
</div>
<div>
<img src="assets/index/languages/south-korea.png">
</div>
</section>
<script src="slick.js"></script>
<script>
$(".slider-area").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
</script>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
</head>
<section class="slider-area slider">
<div>
<img src="https://image.flaticon.com/icons/svg/555/555602.svg" width="200" height="200" class="mx-auto text-center">
</div>
<div>
<img src="https://image.flaticon.com/icons/svg/940/940279.svg" width="200" height="200" class="mx-auto text-center">
</div>
<div>
<img src="https://image.flaticon.com/icons/svg/3013/3013996.svg" width="200" height="200" class="mx-auto text-center">
</div>
</section>
<script>
$(".slider-area").slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
});
</script>
Please try this..
And add above external styles.
You are given this show 3 so, cannot slide anything.
slidesToShow: 3,
slidesToScroll: 3
Please show 1 then slide to another.
slidesToShow: 1,
slidesToScroll: 1
you can try like this:
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/index/languages/france.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/index/languages/germany.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/index/languages/south-korea.png" alt="Third slide">
</div>
</div>
</div>
</body>
I've been having trouble implementing Material Design Bootstrap's carousel. I copy and pasted the carousel example from their website, and I've made sure to have both the JS and CSS in the correct order when loaded. Currently my page only renders the image and text, and can be clicked on with a light effect, but no other images or slides appear and it never switches between them. It also creates a large whitespace on my screen after the carousel.
edit: Changed script.php to script.js
edit 2: Updated index.php that still doesn't work completely:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Site Name</title>
<?php //include_once $_SERVER['DOCUMENT_ROOT'].'/inc/head.php'; ?>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="https://site/css/style.css">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<!-- Custom JS -->
<script type="text/javascript" src="https://site/js/app.js"></script>
</head>
<body>
<header>
<?php include $_SERVER['DOCUMENT_ROOT'].'/inc/nav.php'; ?>
</header>
<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
<div class="mask rgba-black-light"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Light mask</h3>
<p>First text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
<div class="mask rgba-black-strong"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Strong mask</h3>
<p>Secondary text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Slight mask</h3>
<p>Third text</p>
</div>
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
<div class='shell'>
<div class='container-fluid'>
<p class='content content-header' >Title</p>
<p class='content content-text' >Content</p>
</div>
</div>
</body>
<footer>
<?php include_once $_SERVER['DOCUMENT_ROOT'].'/inc/footer.php'; ?>
</footer>
edit 3: Pictures of before and after: Before
After
I blocked sensitive information. All my other pages work fine and there is no issue with CSS. It is just this carousel that doesn't seem to work.
In your index.php page in the head tag. Try adding all of your scripts there.For now just start with the CDN from their website.. Try replacing your tags with this.. Generally it's good to reference all the script and css files you are going to use inside the tags.
<head>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js">
</script>
<link rel="stylesheet" href="https://site/css/style.css">
<script type="text/javascript" src="https://site/js/app.js"></script>
</head>
I have an image gallery that I created with jQuery, it works very well when I click on each image and it appears in another div. Everything was created with Bootstrap. But I would also like to add a prev and back arrow buttons and I have no clue on how to do that.
This is the HTML:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
.selected { border: 2px solid #000; }
.output img {
margin:0 auto;
}
</style>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="JS/lightbox.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container container-fluid ">
<div class="row text-center gallery">
<h2>Gallery</h2>
<div class="col-sm-4 ">
<p>Dimebag</p>
<img src="http://img.wennermedia.com/article-leads-horizontal/rs-3616-rectangle.jpg" class="img-responsive" alt="Dimebag">
</div>
<div class="col-sm-4 ">
<p>Zack Wylde</p>
<img src="http://loudwire.com/files/2016/05/Ozzfest-Knotfest-ZakkSabbath-20160512-KathyFlynn-4393.jpg?w=630&h=420&zc=1&s=0&a=t&q=89" class="img-responsive" style="width:100%" alt="Zack">
</div>
<div class="col-sm-4 ">
<p>Slash</p>
<img src="http://mmusicmag.com/m/wp-content/uploads/2015/01/Slash-Issue-No37.jpg" class="img-responsive" style="width:100%" alt="Slash">
</div>
</div><!--row-->
<hr>
<div class="row ">
<div class="text-center arrows">
<a class="prev" >❮</a>
<a class="next" >❯</a>
</div><!--arrows-->
<div class="col-md-12 output"></div>
</div><!--row-->
</div>
</div><!--container-fluid-->
</body>
</html>
And this is the jQuery code:
$(document).ready(function(){
$(".output").hide();
$(".arrows").hide();
$('img').click(function(){
$(".output").html('<img class="img-responsive " src="' + $(this).attr('src') + '"/>').fadeIn();
$(".arrows").fadeIn();
});//click
//Arrows
$('.next').click(function(){
//Code Here
});//next
});
I know that I have to add some coding in the function that target the arrow with the class next but Im not sure what.
I'm new.when I'm using bootstrap slide show and owl-carousel then bootstrap slide show take owl-carousel CSS how to use that.
carousel item.
<div class="carousel">
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
</div>
bootstrap slide show
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/baner.png" alt="Chania">
</div>
<div class="item">
<img src="images/baner.png" alt="Chania" >
</div>
<div class="item">
<img src="images/baner.png" alt="Flower" >
</div>
<div class="item">
<img src="images/baner.png" alt="Flower" >
</div>
</div>
</div>
Well, maybe it depends in what order you are calling your steelsheets. Whithout any code it will be hard to help you.
In my projects I proceed this way
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="web/lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="web/lib/owlcarousel/css/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="web/lib/owlcarousel/css/owl.theme.css">
</head>
<body>
<div>
<!-- your bootstrap slider -->
</div>
<div>
<!-- your owl slider -->
</div>
<script type="text/javascript" src="web/lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="web/lib/owlcarousel/js/owl.carousel.js"></script>
<!-- init owl -->
<script type="text/javascript">
$('.myOwlCarousel').owlCarousel({
// some configs
});
</script>
</body>
</html>
Ok I seem to be having a problem here. I can't get my carousel to work. I've made sure I'm loading all the javascript files and even added Google's cdn link to be sure. I also believe I am calling it correctly. Some help would be greatly appreciated. Thanks in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Church of the Hills | Nashville TN</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom Google Web Font -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!-- Add custom CSS here -->
<link href="css/landing-page.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="dark-content-section">
<!-- /.container -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"> </li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/girls-slide.jpg" alt="">
<div class="carousel-caption">
...
</div>
<img src="img/girls-slide.jpg" alt="">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<!-- /.dark-content-section -->
<!-- JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$(function(){
$('#carousel-example-generic').carousel();
});
</script>
</body>
</html>
I believe you need to have one
<div class="item"> ... </div>
per image and in your code you only have one, yet you have 3 li's as indicators.
Try this:
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNTU1O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9zdmc+">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojMzMzO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+VGhpcmQgc2xpZGU8L3RleHQ+PC9zdmc+">
</div>
</div>