The bootstrap carousel is working and looping around images. However, when you first open the web page, the carousel slider displays a empty background for a split-second. Afterwards, it is working properly.
I tried to solve it through this css but does not work.
.carousel-control {
background-color: transparent;
}
There are some questions related to preload whole carousel. What kind of jquery code is needed to do that?
Do you know how to get rid of the split-second empty background?
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="{% static 'img/img1.jpg' %}" alt="First slide" />
</div>
<div class="item">
<img class="second-slide" src="{% static 'img/img2.jpg' %}" alt="Second slide">
</div>
<div class="item">
<img class="third-slide" src="{% static 'img/img3.jpg' %}" alt="Third slide">
</div>
</div>
<a class="left carousel-control" data-slide="prev" href="#myCarousel"></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"></a>
</div>
This worked for me.
CSS:
.preload{ display: none; }
HTML
<div class="preload">
<img src="img/img1.jpg" />
<img src="img/img2.jpg" />
<img src="img/img3.jpg" />
</div>
Related
The carousel fades into the next slide when I click the next/previous buttons, even though I have added the 'slide' class.
<div id="testimonials-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color: red;">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" style="background-color: yellow;">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" style="background-color: blue;">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I want the slides to slide smoothly and not fade. Can you guys tell me if I'm doing something wrong or guide me through how I should be doing it
your code work and no problem and slide smoothly, try this strucktur in your html
<head>
<link href="your.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
</head>
<body>
//your html
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
</body>
I see the indicators in the carousel where I can click an element to go to the next slider or the previous slider. Is it possible to directly slide to a specified carousel item from controls external to the carousel?
I was trying to add an external panel (to the carousel component) with links to specific slides. I'm trying to do something like the jquery news slider used at easy-quiz.net. This is a jquery extention and have the callback working to change the highlighted item but want to be able to click one of the items and get the carousel to focus on the corresponding item.
The easiest thing to achieve that is to mark up the external controls both with the data-target and the data-slide-to attributes. data-target identifies the carousel by id, while data-slide-to identifies the slide within the carousel with an integer (starting with 0).
Please see the example below with pure Bootstrap 4 markup and without additional javascript.
<div class="d-flex">
<!-- “External” carousel controls -->
<div id="external-controls" class="col-auto btn-group-vertical" role="group" aria-label="External carousel buttons">
<button class="btn btn-primary" data-target="#main-carousel" data-slide-to="0" type="button">First slide</button>
<button class="btn btn-primary" data-target="#main-carousel" data-slide-to="1" type="button">Second slide</button>
<button class="btn btn-primary" data-target="#main-carousel" data-slide-to="2" type="button">Last slide</button>
</div>
<!-- Carousel -->
<div id="main-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/400x225/422040/fff?text=Slide+1" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x225/e57a44/fff?text=Slide+2" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x225/e3d985/fff?text=Slide+3" alt="Third slide">
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
Other than that, you can always use the .carousel(number) method via javascript in order to slide to a specific slide item.
So, in case you would like to create a custom –maybe simpler– markup, you could do so by writing up something as follows.
$('#external-controls').on('click', 'a', function(event) {
event.preventDefault();
// `this` is the clicked <a> tag
// `$.index()` returns the position of `this` relative to its sibling elements
var target = $(this).index();
$('#main-carousel').carousel(target);
})
<div class="d-flex">
<!-- “External” carousel controls -->
<div id="external-controls" class="col-auto btn-group-vertical" role="group" aria-label="External carousel buttons">
<a class="btn btn-primary" href="#">First slide</a>
<a class="btn btn-primary" href="#">Second slide</a>
<a class="btn btn-primary" href="#">Last slide</a>
</div>
<!-- Carousel -->
<div id="main-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/400x225/422040/fff?text=Slide+1" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x225/e57a44/fff?text=Slide+2" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x225/e3d985/fff?text=Slide+3" alt="Third slide">
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
Yes it is Possible, I personally use Revolution slider to achieve this.
Check out this website where I used the carousel: http://4kaststrategies.com/
at the footer of the carousel, you will see a tiny round button where you can navigate to any of the item image you want.
look up the documentation: https://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/
Did you skip the Carousel With indicators in the documentation? That example is showing you how you can directly slide to a particular item.
The following code is being used to achieve this:
<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>
Notice the attribute data-slide-to.
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
The simple way to use slide carousel using external button or image or anything is :
By using,
data-bs-target="(idname)"
data-bs-slide-to="(array number)"
I'm creating a Go/Hugo Theme with Bootstrap 4 and in my index.html template file I have the code below to iterate through the articles posted:
<div class="col-12 col-md-12" id="main">
<div class="row">
{{- range .Paginator.Pages -}}
{{- if eq .Type "posts"}}
<div class="col-12 col-md-3 col-lg-3">
<figure><img src="{{ .Params.banner }}" /></figure>
<p>{{ .Summary }}</p>
</div>
{{- end -}}
{{- end }}
</div>
</div>
It's not quite ready yet but it already allows me to use a cover image, defined as a FrontMatter parameter, for something more creative than a blog-like style. Here, a sneak-peak.
As you can see there as Pagination implemented as well so I can see whatever is older the the last entries (defined in config.toml and accessed through .Paginator.Pages).
But I was thinking on get rid of this Pagination and transform this listing in a Carousel, but I don't if I would be able to do so with Hugo nor if it's possible to "plug n' play" a Carousel that would working with Bootstrap's existing markup.
How could I accomplish that?
If you can do it in HTML then you can do it with Hugo, so the answer is yes, it's possible. From a brief search on the net there seem to be dozens of carousel implementations for Bootstrap, so just choose one of those.
For example, with the carousel for Bootstrap v4 alpha on the Bootstrap site, you can make a carousel with this code:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Third slide">
</div>
</div>
</div>
Assuming that you have defined the parameters carouselimage and carouselimagealt in the front matter of all your articles, you could generate this HTML with Hugo by doing this:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
{{ $paginator := .Paginate (where .Data.Pages "Type" "posts") }}
{{ range $paginator.Pages }}
<div class="carousel-item active">
<img class="d-block img-fluid" src="{{ .Data.carouselimage }}" alt="{{ .Data.carouselimagealt }}">
</div>
{{ end }}
</div>
</div>
Also, I've made your page type here "posts" as you did in your question, but usually in Hugo it is "post", so you might want to check which one you need.
The issue is quality of image at smaller screens i.e 320px 375px 425px gets blur as i mention height in the class.. I am mentioning the height as i want the image to fit screen initially without user needing to scroll down to look for further information
My question here is should i resize the image so that it has quality in it..
Am sharing my code
CSS
'
.carousel{
background-color: #2f4357;
}
.carousel .item img{
margin: 0 auto;
height:570px;/* Align slide image horizontally center */
}
.bs-example{
margin: 20px;
}
'
html
'
<div class="row">
<div class="col-md-12">
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel 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 carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="images/aa.jpg" alt="First Slide">
</div>
<div class="item">
<img src="images/aa.jpg" alt="Second Slide">
</div>
<div class="item">
<img src="images/aa.jpg" alt="Third Slide">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div><!-- /.col-md-8 -->
</div> <!-- /.end carousel row -->
'
You do not need to set any height or width to images in Bootstrap carousel if you are using them as img source. You need to add height only if you are using them as a background image. For this, you need to add height to .item class and set the background properties for the same.
Am trying to put one bootstrap carousal (with 4 images at a time scroll)
into a bootstrap tabs. I have tried many examples but am not getting. Am using bootstrap 3.0. Can anybody please give an idea for this? Am unable to see at least one bootstrap 3.0 carousal anywhere
You can just use the standard markup but add four images inside each of your .item slide wrappers.
HTML:
<div class="carousel slide" data-ride="carousel" id="carousel4img">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel4img" data-slide-to="0" class="active"></li>
<li data-target="#carousel4img" data-slide-to="1"></li>
<li data-target="#carousel4img" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/350/E83E00/fff&text=Image+1">
<img src="http://placehold.it/350/00ACE7/fff&text=Image+2">
<img src="http://placehold.it/350/e8117f/fff&text=Image+3">
<img src="http://placehold.it/350/C7FF0D/fff&text=Image+4">
</div>
<div class="item">
<img src="http://placehold.it/350/FF0000/fff&text=Image+5">
<img src="http://placehold.it/350/E8950C/fff&text=Image+6">
<img src="http://placehold.it/350/782AE8/fff&text=Image+7">
<img src="http://placehold.it/350/393CE8/fff&text=Image+8">
</div>
<div class="item">
<img src="http://placehold.it/350/40083D/fff&text=Image+9">
<img src="http://placehold.it/350/FF1919/fff&text=Image+10">
<img src="http://placehold.it/350/00E790/fff&text=Image+11">
<img src="http://placehold.it/350/FFB500/fff&text=Image+12">
</div>
</div><!--/.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel4img" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel4img" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--/.carousel -->
CSS:
.item img {
width:25%;
float:left;
}