Salve raga, intanto posto il codice in PHP e CSS
Codice PHP:
<div class="slider-container"> <div class="slider"> <div class="slides" id="slidesgen"> <?php $cont=1; $prev=0; $next=0; foreach ( $post->fotos as $k => $v ) { $idimg = get_the_ID() + $cont; $img = wp_get_attachment_image_src( (string) $v, get_option( 'option_wpmrc_front_imgelenco' ) ); $img = @reset( $img );?> <div id="slides<?php echo $idimg; ?>" class="slide"> <div class="slide__text" id="slides_<?php echo $idimg; ?>"> <img id="slides__<?php echo $idimg; ?>" style="border-radius:15px;" src="<?php echo $img; ?>"> </div> <?php $prev = $idimg - 1; $next = $idimg + 1;?> <a class="slide__prev" href="#slides<?php echo $prev; ?>" title="Prev"></a> <a class="slide__next" href="#slides<?php echo $next; ?>" title="Next"></a>
</div>
<?php $cont++; }?> </div> </div> </div>
codice:
/* slider*/
/* Slideshow container */
html,
body {
height: 100%;
margin: 0px;
}
.slider-container {
/*background: linear-gradient(
149deg,
rgb(247, 0, 255) 0%,
rgb(255, 145, 0) 100%
);*/
display: flex;
align-items: center;
justify-content: center;
height: 270px;
margin-top:-40px;
}
.slider {
width: 500px;
max-width: 600px;
height: 300px;
margin: 20px;
text-align: center;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 300px;
scroll-snap-align: center;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}
.slide a {
background: none;
border: none;
}
a.slide__prev,
.slider::before {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 5%;
}
a.slide__next,
.slider::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 5%;
}
.slider::before,
.slider::after,
.slide__prev,
.slide__next {
position: absolute;
top: 48%;
width: 35px;
height: 35px;
border: solid black;
border-width: 0 4px 4px 0;
padding: 3px;
box-sizing: border-box;
}
.slider::before,
.slider::after {
content: "";
z-index: 1;
background: none;
pointer-events: none;
}
.slider__nav {
box-sizing: border-box;
position: absolute;
bottom: 5%;
left: 50%;
width: 200px;
margin-left: -100px;
text-align: center;
}
.slider__navlink {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
background-color: black;
margin: 0 10px 0 10px;
}
.read-article{
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
color: #000;
background: white;
padding: 10px 20px;
border-radius: 10px;
font-family: arial;
text-decoration: none;
box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px -15px;
}
.read-article:hover{
background: #d5d5d5;
box-shadow: rgba(34, 34, 53, 0.25) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px 0px;
}
iframe[sandbox] .read-article{
display: none;
}
.fa-paw, .fa-car{
color: #163264;
}
@media only screen and (max-width: 768px) {
.slider-container{
height:370px;
}
.slider{
height:330px;
}
a.slide__next, .slider::after,a.slide__prev, .slider::before {
display: none;
}
}
Il link è questo: https://casaviva.house/offerte-affit...-appartamenti/
Praticamente il problema sono le frecce dello slider. Usando Ispeziona Elemento di Chrome e guardando il codice mi sembra ok ma cliccando ad esempio sulla freccia next non punta allo slide successivo