CODEWITHSUNDEEP
cssmaterialize
Mark Loki
Mark Loki

Reputation: 37

Materialize carousel onchange jquery change bg

$(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

Upvotes: 2

Views: 207

Answers (1)

Nisharg Shah
Nisharg Shah

Reputation: 19632

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

Upvotes: 1

Related Questions