0
315
Vistas¿Cómo agrego una imagen de fondo al abrir la página en el control deslizante que he creado?
Hice un control deslizante que, al hacer clic, cambiará el fondo. Al principio de abrir la página el fondo es blanco. ¿Cómo añado una imagen de fondo al principio de la página?
Quiero que la primera página tenga una imagen de fondo. Si se hace clic en una de las funciones, la imagen de fondo cambiará:
después de hacer clic en el ícono, la imagen que debería haber sido reemplazada no se reemplaza, porque quiero que la primera vez que abra esta página haya una imagen de fondo y después de hacer clic en el ícono, la imagen de fondo se reemplace.
$('.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> ```
·
Santiago Trujillo
Responde la pregunta