Slideshow in HTML

Question

Hello,

I'm trying to create the slide show using the below code but it's not really working. Also, in each slide/image I'd like to have short copy and CTA box. Maybe, I need to add Java Script for it to work? What would be the code for it to work? Can I use the one they are providing (see below)

I took it from W3Schoold: https://www.w3schools.com/howto/howto_js_slideshow.asp

<!doctype html> <html> <head> <meta charset="utf-8">

<title>Rob Reed Boot Camp</title>
<link rel="stylesheet" href="main.css">  
</head>

<body>

<div>
<a href="https://business.facebook.com/robreedbootcamp/">
    <img title="Facebook" alt="Facebook" src="img/Facebook_logo.jpg" 
</a>  
<a href="https://www.instagram.com/robreedbootcamp/">
<img title="Instagram" alt="Instagram" src="img/Instagram_logo.jpg"

</a>
</div>    

<header>

<head>    
<img src="img/robreedbootcamp_logo.jpg" alt="Rob Reed Boot Camp logo">


<ul>  
<li>Contact</>
<li> Location</li>
</ul>      

</head> 

<nav> 
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="motivation.html">Motivation</a></li>    
  <li><a href="location.html">Location</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>    

</nav> 

</header> 

      <div class="slideshow-container">

        <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="img/robreedbootcamp_hero.jpg" style="width:100%">
        <div class="slide text">         
         <h2>LOCALLY FOR MORE THAN 10 YEARS</h3>
         <h3>FIND OUT MORE</h2>  
        </div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="img/robreedbootcamp_hero.jpg" style="width:100%">
         <div class="slide text">         
         <h2>FOR ALL GOALS AND ABILITIES</h3>
         <h3>LEARN MORE</h2>  
        </div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="img/robreedbootcamp_hero.jpg" style="width:100%">
         <div class="slide text">         
         <h2>NEW MEMBERS WELCOME</h3>
         <h3>TRY FOR FREE</h2>  
        </div>
      </div>

      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <br>

    <div style="text-align:center">
      <span class="dot" onclick="currentSlide(1)"></span> 
      <span class="dot" onclick="currentSlide(2)"></span> 
      <span class="dot" onclick="currentSlide(3)"></span> 
    </div>    

<section>    
<h2>Rob Reed Boot Camp</h2>
<h3> Every Monday 8pm, Hampton</h3>

</section>

<img src="img/hitandwholebody.jpg" alt="Hit and Whole Body Conditioning">

<h3>Welcome to Rob Reed Boot Camp</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque diam dolor, bibendum ac vestibulum sit amet, convallis ac arcu. Etiam at elit vitae dui ullamcorper semper. Maecenas placerat mauris vehicula nisi sagittis, sed feugiat eros tristique. Nullam fermentum laoreet nisi vitae elementum. Praesent a lorem at nisi dapibus posuere. Sed lacus lacus, ornare non orci at, molestie ultricies mi. Fusce venenatis odio bibendum ligula molestie, nec ullamcorper felis posuere.</p>

<img src="img/who_attends.jpg" alt="who attends rob reed boot camp">    

<h3>Helping with all goals</h3>

      <ul>
<li> Activate your core and improve in other sports
  (cycling, running, triathlon).</li>
<li> Gain more endurance and improve flexibility. </li> 
<li> Become stronger, faster and more agile. </li> 
<li> Lose weight and improve fitness. </li> 
<li> Outside in the summer and during the winter inside. </li> 

</ul> 


<img src="img/who_attends.jpg" alt="who attends rob reed boot camp">

<h2> Who comes to our classes </h2>
<p> We have people of all levels of fitness and with different objectives. Some want to maintain general fitness, loose weight and some have a specific goal, training for triathlon, marathon or cycling race.</p>

<section> 

<h3>What makes us different</h3>    
<ul>        
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit </li>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit</li> 
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit </li>
</ul>

 <div class="container">
 <img src="img/who_attends.jpg" alt="rob reed boot camp photo" style="width:50%;">
 <div class="text-block"> 
  <h4>Try First Class for Free</h4>
    </div>
 </div>    

 <div class="container">
 <img src="img/who_attends.jpg" alt="rob reed boot camp photo" style="width:50%;">
 <div class="text-block"> 
  <h4>About Us</h4>
    </div>
 </div>  

  <div class="container">
 <img src="img/who_attends.jpg" alt="rob reed boot camp photo" style="width:50%;">
 <div class="text-block"> 
  <h4>Stay Motivated</h4>
    </div>
 </div>  

      <div class="container">
 <img src="/who_attends.jpg" alt="rob reed boot camp photo" style="width:50%;">
 <div class="text-block"> 
  <h4>Location</h4>
    </div>
 </div>  


<h2> Testimonials </h2>
<p> 'After few months of joining, I already see how much fitter I became.' Alex</p> 
<p> 'My running really improved since I started the boot camp a year ago and now I'm training for the marathon.' Mark</p>    

</section>    

<footer> 

<header>
    Rob Reed Boot Camp | Tel: 07944184690 | E-mail: robreed.bootcamp@gmail.com
    </header>


<p> 2018 by Rob Reed Boot Camp. All rights reserved 
</p>

</footer> </body> </html>

CSS

{box-sizing:border-box}

/* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; }

/* Hide the images by default .mySlides { display: none; */

}

/* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; }

/* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; }

/* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }

/* Caption text */ .slide text h2, h3{ color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; }

/* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; }

/* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }

.active, .dot:hover { background-color: #717171; }

/* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; }

@-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} }

@keyframes fade { from {opacity: .4} to {opacity: 1} }

JavaScript

var slideIndex = 1; showSlides(slideIndex);

// Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); }

// Thumbnail image controls function currentSlide(n) { showSlides(slideIndex = n); }

Answer 1 · 2018-09-06T17:34:27Z

September 6, 2018 5:34pm

It’s not showing any images and copy in the carousel at all. The only thing is there are the arrows to sroll.

Thank you

Answer 2 · 2018-09-06T19:35:40Z

September 6, 2018 7:35pm

Yes they are in correct folders. The images in the slideshow as well as the rest of the page are showing all fine. Only when I add the CSS for the slideshow the images in the slideshow are not showing. So something to do with CSS? Would you mind to have a quick look if you see any error? Thank you

Welcome to the Treehouse Community

Looking to learn something new?

Alexandra Cianciara

Alexandra Cianciara

Slideshow in HTML

Gabriel Plackey

Gabriel Plackey

2 Answers

Alexandra Cianciara

Alexandra Cianciara

Gabriel Plackey

Gabriel Plackey

Alexandra Cianciara

Alexandra Cianciara