I am working on a slider carousel with bootstrap. My 'active' image loads, but the controls and the slide don't work. As I am following a tutorial, I thought this would be an easy exercise for practice, but I've hit a snag. For anyone concerned about the boostrap.css link I posted the entire html doc ... but its functionality is working well otherwise, so I don't believe that is the issue here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" name="" content="Trey's Personal Website.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trey Coggins | Personal Website</title>
<script type="text/javascript" src="script/index.js"></script>
<link rel="stylesheet" type="text/css" href="styles/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles/index-style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="">Trey Coggins</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
</ul>
</div>
</nav>
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/bricks.jpg" alt="">
<div class="carousel-caption">
<h2>Let's build something together!</h2>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/woods.jpg" alt="">
<div class="carousel-caption">
<h2>Take a walk in the woods</h2>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/stone.jpg" alt="">
<div class="carousel-caption">
<h2>Elevate yourself to the next level</h2>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselControls" 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="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<div class="container text-center">
<div class="row">
<div class="col-md-4">
<img class="rounded-circle" src="img/trey-court-headshot.jpg" alt="Trey & Courtney">
<h2>Trey & Courtney</h2>
<p>She's the love of my life!</p>
<p><a class="btn btn-secondary" href="#" role="button">See more »</a></p>
</div>
<div class="col-md-4">
<img class="rounded-circle" src="img/tootsie-smile.jpg" alt="Mama Tootsie">
<h2>Bodhi & Tootsie</h2>
<p>These two keep us young!</p>
<p><a class="btn btn-secondary" href="#" role="button">See more »</a></p>
</div>
<div class="col-md-4">
<img class="rounded-circle" src="img/royal-hearts.jpg" alt="Royal Flush">
<h2>Poker</h2>
<p>Join the action!</p>
<p><a class="btn btn-secondary" href="#" role="button">See more »</a></p>
</div>
</div>
</div>
</body>
</html>
Can you share your HTML page with all the code in it? I would like to see if you have correctly included the bootstrap's javascript/CSS file.
if you have not included Javascript. here are the javascript files that you need to include in your HTML code
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item item active">
<img class="col-lg-7 d-block w-100" src="img/bricks.jpg" alt="">
<div class="carousel-caption">
<h2>Let's build something together!</h2>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="img/woods.jpg" alt="">
<div class="carousel-caption">
<h2>Take a walk in the woods</h2>
</div>
</div>
<div class="carousel-item item">
<img class="d-block w-100" src="img/stone.jpg" alt="">
<div class="carousel-caption">
<h2>Elevate yourself to the next level</h2>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#myCarousel" role="button" data-slide="next" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Related
So I've been trying to make a portfolio website in Django, I've been following some tutorial for this.
The Carousel on my page doesn't seem to change images when clicking next/previous button. The images displays properly (need to resize it for appropriate looks) but no matter what I do it won't show next/previous image.
I am providing the carousel code and the whole html code:
Carousel code:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?food,food" alt="First slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?cat,cat" alt="Second slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?car,car" alt="Third slide" style="width:100%;">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Whole HTML code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous">
<title>Home</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">OMEGA</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/project">Project</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?food,food" alt="First
slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?cat,cat" alt="Second
slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?car,car" alt="Third
slide" style="width:100%;">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- <h1>Hello, world!</h1> -->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"></script>
-->
</body>
</html>
Try to remove "active" from second and third img tags in your carousel code
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?food,food" alt="First slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?cat,cat" alt="Second slide" style="width:100%;">
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?car,car" alt="Third slide" style="width:100%;">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
To
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?food,food" alt="First slide" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?cat,cat" alt="Second slide" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://source.unsplash.com/1600x800/?car,car" alt="Third slide" style="width:100%;">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Change data-ride and data-slide to data-bs-ride and data-bs-slide. In bootstrap 5 data-ride and data-slide don't work anymore.
Solution 1
As your are using bootstrap 5, you must use data-bs-ride="carousel" and data-bs-slide="carousel" at the places of data-ride="carousel and data-slide="carousel. After that The .active class needs to be added to one of the slides otherwise the carousel will not be visible so remove it for the second and the third slide.
Link: Bootstrap 5 carousel with indicators
Solution 2
Just change the version of your bootstrap to 4 and remenber to set .active class for only one slide.
I'm attempting to simply place a jumbotron on top of a carousel in Bootstrap 5.
I figured out a work around, but for some reason my Jumbotron does not overlay the carousel.
The goal here is to have a static message with two active buttons lay on top as the carousel goes through the slides behind it. Any suggestions would be greatly appreciated.
<!-- Jumbo Tron -->
<div class="jumbotron bg-light">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">KVLF The Voice of the Big Bend</a>
<a class="btn btn-primary btn-lg" href="#" role="button">KALP Big Bend Country</a>
</p>
</div>
<!-- Carousel -->
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/Wstorefront.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Wsocks1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Wstoreinterior1.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
if your goal is to add carousel slider and on carousel top set some content like buttons, text etc.
Here is an example of the carousel slider with custom content
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Custom content on top -->
<div style="
position: absolute;
bottom: 20%;
left: 50%;
right: auto;
align-items: center;
z-index: 99;
text-align: center;
"><button>Show More</button><p style="
color: white;
">Static contant</p></div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
I am new to HTML and CSS.
I want to do a Single Web Page with Navbar and Image Slider.
What I have done is:
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<img src="https://source.unsplash.com/random/300x201" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 1</h3>
<p>Image 1 Image 1</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/300x202" alt="Image 2" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 2</h3>
<p>Image 2 Image 2</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<img src="https://source.unsplash.com/random/300x204" alt="Image 4" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 4</h3>
<p>Image 4 Image 4</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/300x205" alt="Image 5" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 5</h3>
<p>Image 5 Image 5</p>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
This is what I have done for Image Slider. It shows two images when the web page opens. But for next slide it shows only one image. I need two images for all slides(2).
All should be done only by HTML and CSS not JS or others.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg"
height="600px"
class="d-block w-100" alt="...">
</div>
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg"
height="600px"
class="d-block w-100" alt="...">
</div>
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg"
height="600px"
class="d-block w-100" alt="...">
</div>
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
Since you are using bootstrap, I will add an HTML code for Navbar and Slider using Bootstrap components.
It is better to use Bootstrap since it is very easy to create awesome responsive HTML components using Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://slidervilla.com/smooth-slider/files/2014/05/3.jpg" height="600px" class="d-block w-100"
alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
.
Hope #Pramodya fix your rendering issue in the previous answer. I changed his answer a little to display 2 images in 1 slide.
If you want to display 2 images in 1 slide, You need to use flex layout.
--------------------Display: flex-----------------------
| | |
| flex: 1 | flex: 1 |
| | |
--------------------------------------------------------
Checkout this snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div style='display:flex'>
<div style='flex:1'>
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg" height="600px" class="d-block w-100" alt="...">
</div>
<div style='flex:1'>
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg" height="600px" class="d-block w-100" alt="...">
</div>
</div>
</div>
<div class="carousel-item">
<div style='display:flex'>
<div style='flex:1'>
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
<div style='flex:1'>
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
</div>
</div>
<div class="carousel-item">
<div style='display:flex'>
<div style='flex:1'>
<img src="https://slidervilla.com/smooth-slider/files/2014/05/3.jpg" height="600px" class="d-block w-100"
alt="...">
</div>
<div style='flex:1'>
<img src="https://slidervilla.com/smooth-slider/files/2014/05/3.jpg" height="600px" class="d-block w-100"
alt="...">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
carousel doesn't show image
carousel doesn't show image
carousel doesn't show image
This web is powered by bootstrap.
carousel doesn't show image
carousel doesn't show image
carousel doesn't show image
carousel doesn't show image
carousel doesn't show image
carousel doesn't show image
carousel doesn't show image
carousel doesn't show image
carousel doesn't show image
carousel doesn't show image
carousel doesn't show image
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Gallary</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<a class="navbar-brand" href="#">Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="./home.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" title="Showing example of Carousel" href="./gallary.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" title="Showing example of Grid system" href="./sampledata.html">Mountain Data</a>
</li>
</ul>
</div>
</nav>
<div id="gallaryimages" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#gallaryimages" data-slide-to="0" class="active"></li>
<li data-target="#gallaryimages" data-slide-to="1"></li>
<li data-target="#gallaryimages" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/killington.jpg" alt="Killington Mountain">
<div class="carousel-caption">
<h5>Killington Mountain</h5>
<p>4763 Killington Rd, VT</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/hunter.jpg" alt="Hunter Mountain">
<div class="carousel-caption">
<h5>Hunter Mountain</h5>
<p>64 Klein Ave, NY</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/mountcreek.jpg" alt="Mount Creek" data-rjs="3">
<div class="carousel-caption">
<h5 style="color: red;">Mountain Creek</h5>
<p style="color:black;">123 NJ-94, NJ</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#gallaryimages" 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="#gallaryimages" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<br />
<div class="text text-center">
Let's Move to stats page
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="./js/retina/retina.min.js" type="text/javascript"></script>
</body>
</html>
first you need to change the spelling gallary to gallery around lines 69 and 65 then you need to make sure the image names are well specified
<a class="carousel-control-next" href="#galleryimages" role="button" data-slide="next">
<a class="carousel-control-prev" href="#galleryimages" role="button" data-slide="prev">
So,i'm new to this ,the bootstrap carousel isn't working for me,I took the example straight from w3school and it's still not working it only displays the images one atop of the other,admittedly this is a rushed job ,so I may have missed something blindingly obvious.Not to mention my coding knowledge is really patchy,my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pagrindinis puslapis</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>//logotipas
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Pagrindinis</li>
<li>Visos prekės</li>
<li>Populiariausios prekės</li>
<li>Nuolaidos</li>
<li>Pristatymas</li>
<li>Kontaktai</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Prisijungimas/Užsisakymas</li>
</ul>
</div>
</div>
</nav>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="bob.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="young.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="thing.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
I think the problem is with the carousel-item class. Replace it with with item class.
You need to replace carousel-item with item for bootstrap 3 carousels.
Here's the code
<!-- The slideshow -->
<div class="carousel-inner">
<div class="item active">
<img src="http://via.placeholder.com/1100x500" alt="Los Angeles" width="1100" height="500">
</div>
<div class="item">
<img src="http://via.placeholder.com/1100x500" alt="Chicago" width="1100" height="500">
</div>
<div class="item">
<img src="http://via.placeholder.com/1100x500" alt="New York" width="1100" height="500">
</div>
</div>