He trabajado en una solución para cambiar el valor de src según el tamaño de la pantalla, pero de alguna manera, incluso si cambio el tamaño del navegador, solo mostrará la primera imagen (../assets/img/features/cleardent-header.png). Quiero que cambie a (../assets/img/features/cleardent-header-small.png cuando el tamaño de la pantalla sea inferior a 991.
Estaba pensando en usar CSS, pero como está dentro del carrusel, es un poco complicado. ¿Alguien podría darme una sugerencia?
Aquí está mi HTML de la primera diapositiva del carrusel:
<div class="item active"> <img id="first-slide" class="first-slide" alt="First slide">
<!--slogan and CTA-->
<div class="container carousel-caption main-slider">
<div class="row header-slogan fadeInDown animated">
<div class="col-xs-12">
<section class="cd-intro">
<h1 class="cd-headline letters type"><span>Do everything.</span> <span class="cd-words-wrapper ahwaiting"><b class="is-visible">Better.</b><b class="colour-cleardent">with ClearDent</b></span></h1>
</section>
</div>
</div>
<div class="row header-tagline fadeInDown animated">
<div class="col-xs-12">
<p>A complete dental practice management program that you are going to <span class="colour-cleardent-sec">love</span></p>
</div>
</div>
<div class="row header-cta fadeInUp animated">
<div class="col-xs-12">
<button class="btn-u extra-demo-btns" onClick="window.location='../demo';"><i class="fa fa-paper-plane fa-fw"></i> Book a Demo</button>
<a href="https://player.vimeo.com/video/157093017" class="btn-u fancybox-media fbmloading" id="cleardent-page-header-2-vimeo" data-fancybox-title="Why ClearDent?"><i class="fa fa-play fa-fw"></i> Watch a Video</a>
</div>
</div>
</div>
<!--slogan and CTA end-->
</div>
Aquí está mi jQuery:
<script>
$(document).ready(function() {
if($(window).width() > 991) {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
} else {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
}
});
</script>
Su código funciona en la carga inicial del DOM, pero no tiene ningún efecto una vez que se carga el documento y el usuario cambia el tamaño de la ventana del navegador, necesitaría conectar un controlador al evento window.resize para alertar cuando cambia el tamaño de la ventana, luego haz tu misma lógica:
//Place this in your document ready
$(window).resize(function() {
if($(window).width() > 991) {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
} else {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
}
});
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras