Hi Leute,
ich habe einen Slider mit Logos mit Javascript erstellt.
Jetzt habe ich das Problem, dass wenn ich mein Browser kleiner ziehe die verschiedenen Responsive Ansichten nicht automatisch angepasst werden, sonder erst durch Aktualisierung der Seite. Habe ich da etwas übersehen?
// JavaScript Document
const controls=document.querySelector(".controls");
const container=document.querySelector(".thumbnail-container");
const allBox=container.children;
const containerWidth=container.offsetWidth;
const margin=60;
var items=0;
var totalItems=0;
var jumpSlideWidth=0;
// item setup per slide
responsive=[
{breakPoint:{width:0,item:1}}, //if width greater than 0 (1 item will show)
{breakPoint:{width:370,item:1}}, //if width greater than 0 (1 item will show)
{breakPoint:{width:900,item:2}}, //if width greater than 0 (1 item will show)
{breakPoint:{width:1400,item:3}}, //if width greater than 600 (2 item will show)
{breakPoint:{width:1550,item:4}} //if width greater than 1000 (4 item will show)
]
function load(){
for(let i=0; i<responsive.length;i++){
if(window.innerWidth>responsive[i].breakPoint.width){
items=responsive[i].breakPoint.item
}
}
start();
}
function start(){
var totalItemsWidth=0
for(let i=0;i<allBox.length;i++){
// width and margin setup of items
allBox[i].style.width=(containerWidth/items)-margin + "px";
allBox[i].style.margin=(margin/2)+ "px";
totalItemsWidth+=containerWidth/items;
totalItems++;
}
// thumbnail-container width set up
container.style.width=totalItemsWidth + "px";
// slides controls number set up
const allSlides=Math.ceil(totalItems/items);
const ul=document.createElement("ul");
for(let i=1;i<=allSlides;i++){
const li=document.createElement("li");
li.id=i;
li.innerHTML=i;
li.setAttribute("onclick","controlSlides(this)");
ul.appendChild(li);
if(i==1){
li.className="active";
}
}
controls.appendChild(ul);
}
// when click on numbers slide to next slide
function controlSlides(ele){
// select controls children 'ul' element
const ul=controls.children;
// select ul children 'li' elements;
const li=ul[0].children
var active;
for(let i=0;i<li.length;i++){
if(li[i].className=="active"){
// find who is now active
active=i;
// remove active class from all 'li' elements
li[i].className="";
}
}
// add active class to current slide
ele.className="active";
var numb=(ele.id-1)-active;
jumpSlideWidth=jumpSlideWidth+(containerWidth*numb);
container.style.marginLeft=-jumpSlideWidth + "px";
}
window.onload=load();
<!-- Der HTML-Code -->
<div class="thumbnail-slider">
<div class="thumbnail-container">
<div class="item">
<img src="images/x.png" alt="x"/>
</div>
<div class="item">
<img src="images/x.png" alt="x"/>
</div>
<div class="item">
<img src="images/x.png" alt="x"/>
</div>
<div class="item">
<img src="images/x.png" alt="x"/>
</div>
<div class="item">
<img src="images/x-Logo.png" alt="x"/>
</div>
<div class="item">
<img src="images/x.png" alt="x"/>
</div>
<div class="item">
<img src="images/x.png" alt="x"/>
</div>
<div class="item">
<img src="images/x.png" alt="x"/>
</div>
<div class="item">
<img src="images/x.png" alt="x"/>
</div>
<div class="item">
<img src="images/x.png" alt="x"/>
</div>
<div class="item">
<img src="images/x.png" alt="x"/>
</div>
<div class="item">
<img src="images/x.png" alt="x"/>
</div>
<div class="item">
<img src="images/x.png" alt="x"/>
</div>
</div>
<!-- controls slides -->
<div class="controls">
</div>
</div>
<script src="script.js"></script>
/* CSS */
.thumbnail-slider{
width: 70%;
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.thumbnail-slider .thumbnail-container{
width: 100%;
float: left;
transition: margin 1s ease;
}
.thumbnail-slider .item{
height: 200px;
line-height: 200px;
text-align: center;
font-size: 50px;
float: left;
}
.thumbnail-slider .item img{
}
.thumbnail-slider .controls{
width: 100%;
float: left;
padding:15px;
}
.thumbnail-slider .controls ul{
display: block;
text-align: center;
padding:0;
margin:0;
list-style: none;
}
.thumbnail-slider .controls ul li{
height: 20px;
width: 20px;
border:1px solid #c3c3c3;
border-radius:20px;
margin:4px;
font-size:0px;
display: inline-block;
line-height: 33px;
cursor: pointer;
}
.thumbnail-slider .controls ul li.active{
background-color: white;
color:#000000;
}
Diesen Code habe ich aus einem Tutorium und an manchen Stellen abgeändert.
Wenn mir jemand weiterhelfen würde, wäre ich sehr erfreut.
LG Mary
