Navigatie & interactie

Er wordt een carousel en clickable images gebruikt om verschillende images van het huis om te laten zien.

Voorbeeld 1:

Carousel

De code die er wordt gebruikt zijn:

     <div class="scroll-container">

       <img class="slide-images" src="assets/1.jpg" alt="foto1">
       <img class="slide-images" src="assets/2.jpg" alt="foto2">
       <img class="slide-images" src="assets/3.jpg" alt="foto3">
       <img class="slide-images" src="assets/4.jpg" alt="foto4">
       <img class="slide-images" src="assets/5.jpg" alt="foto5">
       <img class="slide-images" src="assets/6.jpg" alt="foto6">
       <img class="slide-images" src="assets/7.jpg" alt="foto7">
       <img class="slide-images" src="assets/8.jpg" alt="foto8">

     </div>
         
    

Voorbeeld 2:

Clicable Images

De code die er wordt gebruikt zijn:

     <article>

       <div class="article-container">

       <div class="slider">
         <img id="img1" src="assets/huis 1.png" alt="">
         <img id="img2" src="assets/Woonkamer.png" alt="">
         <img id="img3" src="assets/Keuken bar.png" alt="">

       </div>
                
        <div class="clickable-images">
         <a href="#img1"><img src="assets/huis 1.png" alt=""></a>
         <a href="#img2"><img src="assets/Woonkamer.png" alt=""></a>
         <a href="#img3"><img src="assets/Keuken bar.png" alt=""></a>

       </div>

     </article>