Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Alexandra Cianciara
Alexandra Cianciara
2,465 Points

Slideshow in HTML

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); }

function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active";

Gabriel Pierce-Lackey
Gabriel Pierce-Lackey
11,014 Points

Are any errors being thrown to the console when you try to click the buttons or from the start of loading the page?

2 Answers

Alexandra Cianciara
Alexandra Cianciara
2,465 Points

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

Alexandra Cianciara
Alexandra Cianciara
2,465 Points

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