Difference between #1 and #2 of
Create Bootstrap5 based Image carousel with thumbnails

Revision #2 has been created by pravi on Dec 4, 2023, 10:40:05 AM with the memo:

description text
« previous (#1) next (#3) »

Changes

Title unchanged

Create Bootstrap5 based Image carousel with thumbnails

Category unchanged

Tutorials

Yii version unchanged

2.0

Tags changed

carousel,bootstrap5 carousel

Content changed

Here is a Corousel widget that is an extension of yii\bootstrap5\Carousel, to show image thumbnails as indicators for the carousel.
 
 
Here is the widget code.
 
```
<?php
[...]
}
```
Use the following CSS for the above widget to show up and work properly.
 
```
 
.product_img_slide {
 
  padding: 100px 0 0 0;
 
}
 
 
.product_img_slide > .carousel-inner > .carousel-item {
 
  overflow: hidden;
 
  max-height: 650px;
 
}
 
 
.carousel-inner {
 
  position: relative;
 
  width: 100%;
 
}
 
 
.product_img_slide > .carousel-indicators {
 
  top: 0;
 
  left: 0;
 
  right: 0;
 
  width: 100%;
 
  bottom: auto;
 
  margin: auto;
 
  font-size: 0;
 
  cursor: e-resize;
 
  /* overflow-x: auto; */
 
  text-align: left;
 
  padding: 10px 5px;
 
  /*  overflow-y: hidden;*/
 
  white-space: nowrap;
 
  position: absolute;
 
}
 
 
.product_img_slide > .carousel-indicators li {
 
  padding: 0;
 
  width: 76px;
 
  height: 76px;
 
  margin: 0 5px;
 
  text-indent: 0;
 
  cursor: pointer;
 
  background: transparent;
 
  border: 3px solid #333331;
 
  -webkit-border-radius: 0;
 
  border-radius: 0;
 
  -webkit-transition: all 0.7s cubic-bezier(0.22, 0.81, 0.01, 0.99);
 
  transition: all 1s cubic-bezier(0.22, 0.81, 0.01, 0.99);
 
}
 
 
.product_img_slide > .carousel-indicators .active {
 
  width: 76px;
 
  border: 0;
 
  height: 76px;
 
  margin: 0 5px;
 
  background: transparent;
 
  border: 3px solid #c13c3d;
 
}
 
 
.product_img_slide > .carousel-indicators > li > img {
 
  display: block;
 
  /*width:114px;*/
 
  height: 76px;
 
}
 
 
.product_img_slide .carousel-inner > .carousel-item > a > img, .carousel-inner > .carousel-item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
 
  display: block;
 
  max-width: 100%;
 
  line-height: 1;
 
  margin: auto;
 
}
 
 
.product_img_slide .carousel-control-prev {
 
  top: 58%;
 
  /*left: auto;*/
 
  right: 76px;
 
  opacity: 1;
 
  width: 50px;
 
  bottom: auto;
 
  height: 50px;
 
  font-size: 50px;
 
  cursor: pointer;
 
  font-weight: 700;
 
  overflow: hidden;
 
  line-height: 50px;
 
  text-shadow: none;
 
  text-align: center;
 
  position: absolute;
 
  background: transparent;
 
  text-transform: uppercase;
 
  color: rgba(255, 255, 255, 0.6);
 
  -webkit-box-shadow: none;
 
  box-shadow: none;
 
  -webkit-border-radius: 0;
 
  border-radius: 0;
 
  -webkit-transition: all 0.6s cubic-bezier(0.22, 0.81, 0.01, 0.99);
 
  transition: all 0.6s cubic-bezier(0.22, 0.81, 0.01, 0.99);
 
}
 
 
.product_img_slide .carousel-control-next {
 
  top: 58%;
 
  left: auto;
 
  right: 25px;
 
  opacity: 1;
 
  width: 50px;
 
  bottom: auto;
 
  height: 50px;
 
  font-size: 50px;
 
  cursor: pointer;
 
  font-weight: 700;
 
  overflow: hidden;
 
  line-height: 50px;
 
  text-shadow: none;
 
  text-align: center;
 
  position: absolute;
 
  background: transparent;
 
  text-transform: uppercase;
 
  color: rgba(255, 255, 255, 0.6);
 
  -webkit-box-shadow: none;
 
  box-shadow: none;
 
  -webkit-border-radius: 0;
 
  border-radius: 0;
 
  -webkit-transition: all 0.6s cubic-bezier(0.22, 0.81, 0.01, 0.99);
 
  transition: all 0.6s cubic-bezier(0.22, 0.81, 0.01, 0.99);
 
}
 
 
.product_img_slide .carousel-control-next:hover, .product_img_slide .carousel-control-prev:hover {
 
  color: #c13c3d;
 
  background: transparent;
 
}
 
```
 
2 0
1 follower
Viewed: 78 759 times
Version: 2.0
Category: Tutorials
Tags: bootstrap5 carousel, carousel
Written by: pravi
Last updated by: pravi
Created on: Dec 4, 2023
Last updated: 11 months ago
Update Article
Revert to #1 | Revert to #2

Revisions

View all history