CODEWITHSUNDEEP
javascripthtmljquerycss
Clinton Emscent
Clinton Emscent

Reputation: 1

How to make the JavaScript slider function?

So I'm trying to create a sliding function for a section in my html. But I noticed that the JavaScript isn't acknowledged by the html/browser. I'm using Eclipse editor. I have done everything I can... Please take a look. I won't say that the code is the problem, cuz everything looks good. Or is it where I stored the JavaScript file? Could the problem be from the directory?

Bad code or not, if I update a work, it should show on the launch, but like I said, it doesn't even acknowledge the presence of a JavaScript file. (Some elements has been removed from the html codes. The customer testimonial are four cards)

const leftArrow = document.getElementsByClassName("leftArrow");
const rightArrow = document.getElementsByClassName("rightArrow");
const slider = document.getElementsByClassName("slider");

let a = 0;
rightArrow.style.visibility = "hidden";
leftArrow.onclick = function() {
  a = a - 550;
  slider.style.left = a + "px";

  //right arrow
  if (a = 0) {
    rightArrow.style.visibility = "hidden";
  } else {
    rightArrow.style.visibility = "visible";
  }

  // left arrow
  if (a = -1650) {
    leftArrowt.style.visibility = "hidden";
  } else {
    leftArrow.style.visibility = "visible";
  }
};

rightArrow.onclick = function() {
  a = a + 550;
  slider.style.left = a + "px";

  //right arrow
  if (a = 0) {
    rightArrow.style.visibility = "hidden";
  } else {
    rightArrow.style.visibility = "visible";
  }

  // left arrow
  if (a = -1650) {
    leftArrowt.style.visibility = "hidden";
  } else {
    leftArrow.style.visibility = "visible";
  }
};
customer-testimonials {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/customer-testimonialbg.jpg);
  background-size: cover;
  background-position: center;
  height: 100vh;
  background-attachment: fixed;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


/*.row h2{

    font-size: 21px;
    margin-bottom: 70px;
    position: relative;
     }
    */


/*
    .row h2::after{

    content: " ";
    position: absolute;
    width: 50%;
    height: 5px;
    background-color: #0066ac;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    border-radius: 10px;
    }
    */

.container {
  width: 550px;
  height: 330px;
  border-radius: 12px;
  box-shadow: 0 5px 55px rgba(51, 51, 51, 0.336);
  position: relative;
  overflow: hidden;
}

.slider {
  width: auto;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .5s;
}

.slideBar {
  width: 100%;
  height: 60px;
  position: absolute;
  background-color: #f09f07;
  bottom: 0;
  left: 0;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.slideBar span {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  display: grid;
  place-items: center;
  color: green;
  cursor: pointer;
}

.card {
  width: 550px;
  height: 290px;
  padding: 40px 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.card::after {
  content: " ";
  position: absolute;
  width: 110px;
  height: 110px;
  background-color: green;
  top: 0;
  right: 0;
  border-bottom-left-radius: 100%;
}

.profile {
  display: flex;
  align-items: center;
}

.profile img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 25px;
}

.name_job h2 {
  color: #0066ac;
  margin-bottom: 4px;
}

.card p {
  font-size: 15px;
  line-height: 22px;
  opacity: .9;
}
<html>

<body>
  <section class="customer-testimonials">
    <div class="row">
      <h2>Customer Testimonials</h2>
    </div>
    <div class="container">
      <div class="slider">
        <div class="card">
          <div class="profile">
            <img src="resources/img/danny-blinks.jpg" alt="dannyblinks">
            <div class="name_job">
              <h3>Danny Blinks</h3>
              <p>Lorem ipsum dolor sit</p>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p>
        </div>
        <div class="card">
          <div class="profile">
            <img src="resources/img/jenny%20lawrence.jpg" alt="jennylawrence">
            <div class="name_job">
              <h3>Jenny Lawrence</h3>
              <p>Lorem ipsum dolor sit</p>
            </div>
          </div>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p>
        </div>


      </div>

      <div class="slideBar">
        <span class="leftArrow"><i class="ion-ios-arrow-thin-left"></i></span>
        <span class="rightArrow"><i class="ion-ios-arrow-thin-right"></i></span>
      </div>
    </div>

  </section>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="resources/js/main.js"></script>
</body>

</html>

Upvotes: 0

Views: 327

Answers (1)

Elvis Pimentel
Elvis Pimentel

Reputation: 370

There is a couple of error and typos in your logic, let's fix them:

  1. document.getElementsByClassName() returns a collection of elements with specified class, you're trying to access style property without indicating what item in the resulted collection you need to modify. For this to work, access the element in the resulted array by indicating the index document.getElementsByClassName("leftArrow")[0];, or simply get the element by its id.
  2. There is a typo trying to use leftArrow, you typed leftArrowt, fix that.
  3. You are assigning values instead of comparing in your conditionals. if(a = 0) is assignment and your in block is expecting a condition. Use == or === depending your needs for this specific case. See this documentation

const leftArrow = document.getElementsByClassName("leftArrow")[0];
const rightArrow = document.getElementsByClassName("rightArrow")[0];
const slider = document.getElementsByClassName("slider")[0];

let a = 0;
rightArrow.style.visibility = "hidden";
leftArrow.onclick = function() {
    a = a - 550;
    slider.style.left = a + "px";

    //right arrow
    if (a == 0) {
        rightArrow.style.visibility = "hidden";
    } else {
        rightArrow.style.visibility = "visible";
    }

    // left arrow
    if (a == -1650) {
        leftArrow.style.visibility = "hidden";
    } else {
        leftArrow.style.visibility = "visible";
    }
};

rightArrow.onclick = function() {
    a = a + 550;
    slider.style.left = a + "px";

    //right arrow
    if (a == 0) {
        rightArrow.style.visibility = "hidden";
    } else {
        rightArrow.style.visibility = "visible";
    }

    // left arrow
    if (a == -1650) {
        leftArrow.style.visibility = "hidden";
    } else {
        leftArrow.style.visibility = "visible";
    }
};
.slider{
     width: auto;
     height: 100%;
     display: flex;
     position: absolute;
     top: 0;
     left: 0;
     transition: all .5s;
}
 .slideBar {
     width: 100%;
     height: 60px;
     position: absolute;
     background-color: #f09f07;
     bottom: 0;
     left: 0;
     padding: 0 60px;
     display: flex;
     align-items: center;
     justify-content: space-between;
}
 .slideBar span{
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background-color: #fff;
     display: grid;
     place-items: center;
     color: green;
     cursor: pointer;
}
 .card {
     width: 550px;
     height: 290px;
     padding: 40px 50px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     position: relative;
}
 .card::after{
     content: " ";
     position: absolute;
     width: 110px;
     height: 110px;
     background-color: green;
     top: 0;
     right: 0;
     border-bottom-left-radius: 100%;
}
 .profile {
     display: flex;
     align-items: center;
}
 .profile img{
     width: 100px;
     height: 100px;
     border-radius: 50%;
     margin-right: 25px;
}
 .name_job h2{
     color: #0066ac;
     margin-bottom: 4px;
}
 .card p{
     font-size: 15px;
     line-height: 22px;
     opacity: .9;
}
 customer-testimonials {
     background-image:linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/customer-testimonialbg.jpg);
     background-size: cover;
     background-position: center;
     height: 100vh;
     background-attachment: fixed;
     width: 100%;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
}
 .container{
     width: 550px;
     height: 330px;
     border-radius: 12px;
     box-shadow: 0 5px 55px rgba(51, 51, 51, 0.336);
     position: relative;
     overflow: hidden;
}
<section class="customer-testimonials">
   <div class="row">
      <h2>Customer Testimonials</h2>
   </div>
   <div class="container">
      <div class="slider">
         <div class="card">
            <div class="profile">
               <img src="resources/img/danny-blinks.jpg" alt="dannyblinks">
               <div class="name_job">
                  <h3>Danny Blinks</h3>
                  <p>Lorem ipsum dolor sit</p>
               </div>
            </div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p>
         </div>
         <div class="card">
            <div class="profile">
               <img src="resources/img/jenny%20lawrence.jpg" alt="jennylawrence">
               <div class="name_job">
                  <h3>Jenny Lawrence</h3>
                  <p>Lorem ipsum dolor sit</p>
               </div>
            </div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p>
         </div>
      </div>
      <div class="slideBar">
         <span class="leftArrow"><i class="ion-ios-arrow-thin-left"></i></span>
         <span class="rightArrow"><i class="ion-ios-arrow-thin-right"></i></span>
      </div>
   </div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="resources/js/main.js"></script>

Keep working, is almost done!

Upvotes: 1

Related Questions