Question

0

326

Views

How do I add a background image when opening the page on the slider that I have created?

I made a slider which when clicked will change the background. At the beginning of opening the page the background is white. How do I add a background image at the beginning of the page?

I want the first page to have a background image. If one of the features is clicked the background image will change:

after clicking the icon, the image that should have been replaced is not replaced, because I want the first time I open this page there is a background image and after clicking the icon the background image is replaced.

$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 6,
  speed: 300,
  focusOnSelect: true,
  variableWidth: true,
  variableHeight: true,
  adaptiveHeight: true,
  arrows: false,
  responsive: [{
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

$(document).on('click', '.sg-feature', function() {
  $('.sg-feature-desc').addClass('hidden');
  $(this).find('div').removeClass('hidden');
});

let gambar1 = document.querySelector('#gambar1');
let gambar2 = document.querySelector('#gambar2');
let gambar3 = document.querySelector('#gambar3');
let gambar4 = document.querySelector('#gambar4');
let gambar5 = document.querySelector('#gambar5');
let gambar6 = document.querySelector('#gambar6');
let gambar7 = document.querySelector('#gambar7');

gambar1.addEventListener('click', () => {
  document.body.style.backgroundImage = "url('image/b1.jpg')";
});

gambar2.addEventListener('click', () => {
  document.body.style.backgroundImage = "url('image/b2.jpg')";
});

gambar3.addEventListener('click', () => {
  document.body.style.backgroundImage = "url('image/b3.jpg')";
});

gambar4.addEventListener('click', () => {
  document.body.style.backgroundImage = "url('image/b4.jpg')";
});

gambar5.addEventListener('click', () => {
  document.body.style.backgroundImage = "url('image/b5.jpg')";
});

gambar6.addEventListener('click', () => {
  document.body.style.backgroundImage = "url('image/b6.jpg')";
});

gambar7.addEventListener('click', () => {
  document.body.style.backgroundImage = "url('image/b7.jpg)";
});

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 625px;
}

* {
  box-sizing: border-box;
}

.slider {
  width: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}

.center .slick-center h3 {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
}

.center h3 {
  opacity: 0.8;
  transition: all 300ms ease;
}

.hidden {
  display: none;
}

.hidden1 {
  display: none;
}

.hidden2 {
  display: none;
}

.hidden3 {
  display: none;
}

.hidden4 {
  display: none;
}

.hidden5 {
  display: none;
}

.hidden6 {
  display: none;
}

```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/tes.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">

<img src="image/b1.jpg" style="z-index: -1;">
<section class="background center slider variable-width variable-height ">
  <div id="gambar1" class="text-center sg-feature ">
    <img class="rounded mx-auto d-block" src="image/eat.png" style="width: 100px; height: 100px;">
    <h3>Eat and Come</h3>
    </br>
    <div id="newpost" class="sg-feature-desc hidden">
      <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
      <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <div id="gambar2" class="text-center sg-feature">
    <img class="rounded mx-auto d-block" src="image/grab.png " style="width: 100px; height: 100px;">
    <h3>Grab</h3>
    </br>
    <div id="newpost1" class="hidden  sg-feature-desc">
      <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
      <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <div id="gambar3" class="text-center sg-feature">
    <img class="rounded mx-auto d-block" src="image/experience.png" style="width: 100px; height: 100px;">
    <h3>Experience</h3>
    </br>
    <div id="newpost2" class="hidden  sg-feature-desc">
      <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
      <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <div id="gambar4" class="text-center sg-feature">
    <img class="rounded mx-auto d-block" src="image/Secret sale.png" style="width: 100px; height: 100px;">
    <h3>Secret Sale</h3>
    </br>
    <div id="newpost3" class="hidden  sg-feature-desc">
      <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
      <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <div id="gambar5" class="text-center sg-feature ">
    <img class="rounded mx-auto d-block" src="image/sale.png" style="width: 100px; height: 100px;">
    <h3>Hashtag Sale</h3>
    </br>
    <div id="newpost4" class="hidden  sg-feature-desc">
      <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
      <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <div id="gambar6" class="text-center sg-feature ">
    <img class="rounded mx-auto d-block" src="image/loyalty.png" style="width: 100px; height: 100px;">
    <h3>Loyalty</h3>
    </br>
    <div id="newpost5" class="hidden  sg-feature-desc">
      <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
      <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <div id="gambar7" class="text-center sg-feature">
    <img class="rounded mx-auto d-block" src="image/auction.png" style="width: 100px; height: 100px;">
    <h3>Auction</h3>
    </br>
    <div id="newpost6" class="hidden  sg-feature-desc">
      <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
      <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js" type="text/javascript" charset="utf-8"></script>
```

over 4 years ago · Santiago Trujillo

Answer question

0

326

How do I add a background image when opening the page on the slider that I have created?

Find remote jobs

Andres GPT