Topic: Lightbox inside the Carousel

Boris Akimenko pro asked 5 years ago


Hi guys! I'll give you a new feature for next release :) If we wanna go combine the Carousel and Lightbox - we'll get nothing. It's 'cause bootstrap syles where elements inside ".carousel-inner" hadly bounded to it's parent like a ".carousel-inner>.prev" or ".carousel-inner>.active". You can go rewrite the code fo your components (it's bad) or you can unbind this inset styles from ".carousel-inner" like ".carousel-inner .prev". So I'd change it like this in my custom file:
.carousel-inner .carousel-item img,
.carousel-inner .carousel-item a > img {
    max-width: 100%;
    height: auto;
}
.carousel-inner .carousel-item {
    position: relative;
    display: none;
    -webkit-transition: .6s ease-in-out left;
    -o-transition: .6s ease-in-out left;
    transition: .6s ease-in-out left;
}
.carousel-inner .carousel-item img,
.carousel-inner .carousel-item a > img {
    line-height: 1;
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-inner .carousel-item {
        -webkit-transition: -webkit-transform .6s ease-in-out;
        transition: -webkit-transform .6s ease-in-out;
        -o-transition: -o-transform .6s ease-in-out;
        transition: transform .6s ease-in-out;
        transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out, -o-transform .6s ease-in-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
    .carousel-inner .carousel-item.next, .carousel-inner .carousel-item.active.right {
        left: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    .carousel-inner .carousel-item.prev, .carousel-inner .carousel-item.active.left {
        left: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    .carousel-inner .carousel-item.next.left, .carousel-inner .carousel-item.prev.right, .carousel-inner .carousel-item.active {
        left: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.carousel-inner .active,
.carousel-inner .next,
.carousel-inner .prev {
    display: block;
}

.carousel-inner .active {
    left: 0;
}

.carousel-inner .next,
.carousel-inner .prev {
    position: absolute;
    top: 0;
    width: 100%;
}

.carousel-inner .next {
    left: 100%;
}

.carousel-inner .prev {
    left: -100%;
}

.carousel-inner .next.left,
.carousel-inner .prev.right {
    left: 0;
}

.carousel-inner .active.left {
    left: -100%;
}

.carousel-inner .active.right {
    left: 100%;
}
Here demo

Hi, Boris! This is awesome! We'll take a look at this ;)

Boris Akimenko pro answered 5 years ago


But will be better if you'll make that carousel will change the slides while it's changed in lightbox.

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags