CODEWITHSUNDEEP
javascript
Matute VIP
Matute VIP

Reputation: 31

Responsive Carrousel in JavaScript

how are you, well I am triying to make a Carrousel responsive with Javascritp, but I am struggling with the logic here. I've tried everything, with css is imposible, because the images are note background images. I am about to go crazy with this. This is the code

    var carruselimagenes = []

carruselimagenes [0] = ["articulos.html" , "imagenes/cover1.png"]
carruselimagenes [1] = ["contacto.html" , "imagenes/cover2.png"]
carruselimagenes [2] = ["contacto.html" , "imagenes/cover3.png", "imagenes/cover400.png"]
carruselimagenes [3] = ["jardinvertical.html" , "imagenes/cover4.png"]

var carruselresponsive = []

carruselresponsive [0] = ["imagenes/cover400.png"]

var links = document.getElementById('linkcarrusel')
var imagenes = document.getElementById('imagencarrusel')

links.href = carruselimagenes [0][0]
imagenes.src= carruselimagenes [0][1]

var imagenesResponsive = responsive window.matchMedia("(max-width: 599px)")

if (window.matchMedia("(max-width: 599px)").matches) { imagenes.src = carruselresponsive [0]
    else {
        imagenes.src = carruselimagenes [0][1]
    }

}

var orden = 0

function carruselautomatico() {

orden++
if (orden>3) {orden=0}
links.href = carruselimagenes[orden][0]
imagenes.src = carruselimagenes[orden][1]

}

setInterval(carruselautomatico, 6000)



function carruselflechasadelante() {
    orden++
    if (orden>3) {orden=0}
    links.href = carruselimagenes[orden][0]
   imagenes.src = carruselimagenes[orden][1]

}

function carruselflechasatras() {
    orden--
    if (orden<0) {orden=3}
    links.href = carruselimagenes[orden][0]
   imagenes.src = carruselimagenes[orden][1]
}
body{background-color: white;
font-family: 'Open Sans', sans-serif;}


header, section, footer{ width: 960px;
    margin-right: auto;
    margin-left: auto;
 }
#carrusel{ width:960px;
    height: 350px;
    background-color: #d4d9a0;
    margin-top: 15px;
    margin-bottom: 15px;
 position: relative;
  text-align: center;
}


  button{ background-color: none;
    height: 30px;
    width: 90px;
 margin-top: 10px;
 margin-left: 35px;
border-color: #00ab84;
 color: #00ab84;
   display:inline-block;

   font-size: 30px;
   text-align: center;
line-height: 5px;
}

button:hover{background-color: #00ab84;
color:white;
transition: 1s;}

/** Responsive**/

@media all and (min-width: 600px) and (max-width: 1023px){


    #carrusel{ width:400px;
    height: 400px;}
}
/*Fin responsive 600 1023**/


@media all and (max-width: 599px) {

#carrusel{ width:300px;
    height: 400px;

}

}
<!DOCTYPE html>
<html>
<head>
    <title>Prueba Carrusell</title>

    <link rel="stylesheet" type="text/css" href="css/stylecarrusel.css">
    <meta charset="utf-8">
    <meta name="viewport"  content="width=device-width, initial-scale=1" >

    <script type="text/javascript" src="js/script.js"></script>
    
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> 
</head>
</head>
<body>


<div id="carrusel">

        

        
        <a href="" id="linkcarrusel"><img src="" id="imagencarrusel"></a>
        <button id="atras" onclick="carruselflechasatras()"><</button>
        <button id="adelante" onclick="carruselflechasadelante()">></button>
    
        
    </div>

<script type="text/javascript" src="js/scriptcarrusel.js"></script>
</body>
</html>

It just doesn't work, and my head is about to explode. Could somebody give me a hand??

Best!

Matt

Upvotes: 0

Views: 99

Answers (1)

Jordan
Jordan

Reputation: 158

I think the reason your having trouble is because the image shows at the full size no matter what the container size is.

you can stop it using css overflow: hidden; but for you try this:

#carrusel img {
    max-width: 100%;
}

Upvotes: 1

Related Questions