Materialize carousel onchange jquery change bg

user_8390223 0
Viewed 117

$(document).ready(function() {
    $('.carousel').carousel();
});
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:focus {
  outline: 0;
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    background-color: #000000;
}

.carousel {
    height: 700px;
    -webkit-perspective: 600px;
            perspective: 600px;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.carousel .carousel-item {
    cursor: -webkit-grab;
    cursor: grab;
    width: 400px;
}

.carousel .carousel-item:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.carousel .carousel-item img {
    width: 100%;
}

.carousel .carousel-item h3 {
    background-color: #ffffff;
    color: #000000;
    font-size: 2em;
    font-weight: bold;
    margin: -5px 0 0;
    padding: 10px 5px;
    text-align: center;
}
<div class="carousel">
    <div class="carousel-item">
        <img src="./img/gry1.png" alt="Dog" title="Dog" id="Dog">
    </div>
    
    <div class="carousel-item">
        <img src="./img/img1.png" alt="Cat" title="Cat" id="Cat">
    </div>
    
        <div class="carousel-item">
        <img src="./img/img1.png" alt="Wolf" title="Wolf" id="Wolf">
    </div>
    
        <div class="carousel-item">
        <img src="./img/img1.png" alt="Tiger" title="Tiger" id="Tiger">
    </div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js'></script><script  src="./script.js"></script>

I'd like to change background for each item in my carousel, materialize adding "active" class for selected item in carousel but I cant figure out how to change bg (for whole page), I was trying to add background image to css for each item but it didnt cover whole page bg.

I think it will be good to solve it by jquery (check which item is "active" and select background for that item, adding it to body class)

The same script available on codepen: https://codepen.io/crianbluff/details/PMZBVJ

materialize css
1 Answers

You can do it like that.

I added the dummy data that contains image-url and I added carousel-item--* classes in HTML.

const setBackground = () => {
    const number = document.querySelector('.carousel-item.active').classList[1].split('--')[1];
    document.body.setAttribute('style', `background-image: url("${dummy[number]}")`);
}

in number variable, I am getting the carousel-item--* number and get the image-url of dummy data through index and add background-image through javascript

Codepen: https://codepen.io/NishargShah/pen/oNzwGwx?editors=1010

user_87982200
Related