CODEWITHSUNDEEP
javascripthtmlsliderslideshow
schnitzel
schnitzel

Reputation: 33

Create Slideshow with JavaScript

I am currently working on a small web-project, that's supposed to contain multiple Slideshows. As I have never really worked with JavaScript before, this turns out to be harder then I was hoping it would be...

I found this rather simple Code from w3schools, that I am trying to implement. Sadly I am confronted with multiple problems, I can't figure out how to fix:

At first I was trying the first example on the page (https://www.w3schools.com/howto/howto_js_slideshow.asp) "Slideshow / Carousel". This worked fine, except it wont show anything unless you click on the previous/next button. So if I reload the page, the slideshow container is empty instead of showing the first slide.

Now I would like to put a second Slider on my webpage. Here I switched the JavaScript code to the last example from w3schools "Multiple Slideshows". Here I have the same problem as before: when refreshing the page both slideshows show no image unless you klick the revious/next button. Also I would like to add the dots on the bottom of each slideshow. Sadly I can't figure out how to add the dots to the JavaScript Code.

Can anyone help me understand this? Very happy thank you in advance!! :)

Edit1: I like to clearify: I dont't want an automatic slideshow. The slides itself should only change when I click on the previous/next button or the dots. The Problem is though that when I first open the page the slideshow shows nothing. By default I like the first slide to be shown.

Edit2: I just copied my JavaScript Code to the bottom of my html (instead of the extern script.js file) and this fixes the Problem with not showing the first slide when refrehsing the page! But I still need some help with integrating the dots in the javascript code

My Code: 

/***************************************************************** SLIDESHOW **/
var slideIndex = [1,1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["slides1", "slides2"]
showSlides(0, 0);
showSlides(0, 1);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex[no]-1].style.display = "table";
}
*  { margin:0px; padding:0px; border:0px; box-sizing: border-box;}
html { width:100%; height:100%; }
body {
    position:relative;
    margin: 0px auto;
    padding: 0px;
    height: 100%;
    width: 100%;
}

/****************************************************************** BASIC CSS */
body {
    font-family:'Montserrat';
    font-weight: 400;
    font-size: 12px;
}

/** HEADINGS **/
h1,h2,h3,h4,h5,h6 {
    font-family: 'Montserrat';
    font-weight: normal;
    position:    relative;
    padding:  0 0 20px 0;
}
h1 { font-size: 33px; }

/** LAYOUT **/
.row:after {
    content: "";
    clear: both;
    display:table;
}

[class*="col-"] {
    float:left;
    width:99.99999%;
    height:100%;
}

@media (min-width:640px) {
    .col-s-1{width:99.99999%;} .col-s-2{width:49.99999%;} .col-s-3{width:33.22222%;} .col-s-4{width:24.9999%;}
}
@media (min-width:800px) {
    .col-m-1{width:99.99999%;} .col-m-2{width:49.99999%;} .col-m-3{width:33.22222%;} .col-m-4{width:24.9999%;}
}
@media (min-width:1024px) {
    [class*="col-"] {height:100vh;}
    .col-l-1{width:99.99999%;} .col-l-2{width:49.99999%;} .col-l-3{width:33.22222%;} .col-l-4{width:24.9999%;}
}

article {position:relative;padding:80px 70px;}
.center_wrapper {
    display:table;
    width:100%;
    height:100%;
}
.center_box {
    margin: 0px auto;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

/*************************************** SLIDER GENERAL **/
.slideshow-container {
    width: 100%;
    height: 100%;
    position: relative;
}
.slides1 {
    display: none;
    width:100%;
    height:100%;
}
/** NEXT, PREVIOUS AND DOTS **/
.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;
    text-decoration:none;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
.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}
}

/********************************************* SLIDER 1 **/
#BigSlider {
    background-image: url('images/red.jpg'); 
    background-color:red;
    background-repeat: no-repeat;
    background-attachment: fixed; 
    background-position: center center; 
    background-size: cover;
    height:100vh;
    width:100%;
}
/** DEPARTMENTS **/
.department {
    width:300px;
    margin: 0px auto;
}
.department>a {
    color:#fff;
    text-decoration:none;
    
}
.department>a>i {
    font-size:60px;
    margin-bottom:10px;
}
.department>a>h4 {
    font-size:18px;
    font-weight:bold;
}
.department>a>p {
    font-size:14px;
    text-align:left;
}

/********************************************* SLIDER 2 **/
/** EMPLOYEES **/
#Employees {
    background-color:#222;
    color:#fff;
}
#Employees>h1 {
    color:#fff;
}
.employee_info {color:#fff;}
<div class="row">
  <article id="BigSlider" class="col-l-1">                    
      <div class="slideshow-container">
          <div class="slides1 fade">
               <div class="center_box">
                    <div class="department">
                         <a href="#">
                              <i class="far fa-envelope"></i>
                              <h4>HEADLINE1</h4>
                              <p>
                                  Some Text here...
                              </p>
                          </a>
                      </div>
                                
                </div>
            </div>

            <div class="slides1 fade">
                <div class="center_box">
                    <div class="department">
                        <a href="#">
                            <i class="fas fa-users"></i>
                            <h4>HEADLINE 2</h4>
                            <p>
                                Some Text here...
                            </p>
                        </a>
                    </div>
                </div>
            </div>

            <div class="slides1 fade">
                <div class="center_box">
                    <div class="department">
                        <a href="#">
                            <i class="fas fa-users"></i>
                            <h4>HEADLINE 3</h4>
                            <p>
                                Some Text here...
                            </p>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Next and previous buttons -->
            <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
            <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
        </div>
        <br>

        <!-- The dots/circles -->
        <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>   
    </article>
</div>
            
<div class="row">
    <article id="Employees" class="col-l-2">
        <h1>HEADLINE HEADLINE HEADLINE</h1>

        <div id="pic_box_mobile" class="slideshow-container">
            <div class="slides2 fade">
                <div class="center_box">

                        <div class="employee_info">
                            <h4>111NAME NAME</h4>
                            <h5>111POSITION</h5>
                        </div>

                </div>
            </div>
            <div class="slides2 fade">
                <div class="center_box">

                        <div class="employee_info">
                            <h4>222NAME NAME</h4>
                            <h5>222POSITION</h5>
                        </div>

                </div>
            </div>
            <div class="slides2 fade">
                <div class="center_box">

                        <div class="employee_info">
                            <h4>333NAME NAME</h4>
                            <h5>333POSITION</h5>
                        </div>

                </div>
            </div>
            <div class="slides2 fade">
                <div class="center_box">

                        <div class="employee_info">
                            <h4>444NAME NAME</h4>
                            <h5>444POSITION</h5>
                        </div>

                </div>
            </div>
           <!-- Next and previous buttons -->
            <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
        </div>
        <br>

        <!-- The dots/circles -->
        <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>
          <span class="dot" onclick="currentSlide(4)"></span>
        </div>  
    </article>

</div>

Upvotes: 0

Views: 5421

Answers (2)

Rimika Datta
Rimika Datta

Reputation: 21

Here is a carousel which can display multiple items per page.

https://jsfiddle.net/rimika89/a9pqnv3f/1/

class Carousel {
  constructor() {
    this.currentPage = 1;
    this.perPage = 2;
    this.data = [];
    this.getData();
    //if (this.data) {
     // this.displayData();
    //}
    document.querySelector(".right-arrow").addEventListener("click", (event) => {
      event.preventDefault();
      this.handleRightClick();
    });
    document.querySelector(".left-arrow").addEventListener("click", (event) => {
      event.preventDefault();
      this.handleLeftClick();
    });
  }
  countTotalPages() {
    let totalPages = Math.ceil(this.data.length / this.perPage);
    return totalPages;
  }
  handleLeftClick() {
    if (this.currentPage === 1) {
      return;
    }
    this.currentPage--;
    this.displayData();
  }
  handleRightClick() {
    const totalPages = this.countTotalPages();
    if (this.currentPage >= totalPages) {
      return;
    }
    this.currentPage++;
    this.displayData();
  }
  paginate() {
    let startIndex = (this.currentPage - 1) * this.perPage;
    let endIndex = (this.currentPage * this.perPage);
    return this.data.slice(startIndex, endIndex);
  }
  displayData() {
    if (this.data) {
      const paginatedList = this.paginate();
      document.querySelector('.carousel-wrapper').innerHTML = paginatedList !== '' ? paginatedList.map((item) => {
        return `<div class="carousel-item" id=${item.id}>${item.data}</div>`;
      }).join('') : '<div>No Data To show</div>';
      document.querySelector(".current-page").innerHTML = this.currentPage;
      document.querySelector(".total-pages").innerHTML = this.countTotalPages();
    }
  }
  fetch() {
    const data = [{
        'id': '1',
        'data': 'Data 1'
      },
      {
        'id': '2',
        'data': 'Data 2'
      },
      {
        'id': '3',
        'data': 'Data 3'
      },
      {
        'id': '4',
        'data': 'Data 4'
      },
      {
        'id': '5',
        'data': 'Data 5'
      }
    ];
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(data);
      }, 2000);
    });
  }
  async getData() {
    try {
      const response = await this.fetch();
      this.data = response;`enter code here`
      this.displayData();
    } catch (error) {
      console.log('fetch failed', error);
    }
  }
}
let carousel = new Carousel();

Upvotes: 2

krupesh Anadkat
krupesh Anadkat

Reputation: 2119

Your answer Lies in the question itself. Here is the LINK of w3Schools.

  • It has Tiny Dots at Bottom which you need.
  • Also the images (slides) scroll automatically.
  • First slide will be shown everytime you reload page.
  • The code is w3Schools is beginner friendly, you dun require knowledge of javascript to Embed that SlideShow in your site.
  • More Technical term for that slideshow thing is Carousel

All the best :)

Upvotes: 0

Related Questions