When the user clicks on the arrow to change testimonial how can I get it to go to the next comment?

1

When I click on the arrow to change testimonial comment my page is automatically scrolling to the top of the webpage? Below represents the HTML code for the slider for the testimonial section. When the user clicks on the arrow to change testimonial how can I get it to go to the next comment? Github repo if you need to look at more code. This is for the index.html page.

<!-- Section -->
<div class="template-section template-section-padding-reset template-clear-fix">
<!-- Flex layout 50x50% -->
<div class="template-layout-flex template-clear-fix template-background-color-1">
<!-- Left column -->
<div>
   <!-- Header + subheader -->
   <div class="template-component-header-subheader">
      <h2>Testimonials</h2>
      <div></div>
      <span>Our customers love us</span>
   </div>
   <!-- Space -->
   <div class="template-component-space template-component-space-2"></div>
   <!-- Testimonials list -->
   <div class="template-component-testimonial-list template-clear-fix">
      <!-- Content -->
      <ul class="template-clear-fix">
         <li>
            <p>I could not be happier with the job you did on my car. It looks great. Thank you for your great service and I will continue to refer friends and family to you all.</p>
            <h6>Dotti Newman</h6>
            <span>Audi Q5</span>
         </li>
         <li>
            <p>I think Auto Spa is the best car washers ever. Love the price, convenience and customer service. Thanks so much! My car looks like new. I will definitely come again.</p>
            <h6>David Magnus</h6>
            <span>Nissan Titan X5</span>
         </li>
         <li>
            <p>Finally a car wash that does pay attention to the detail. I have a little extra time and money and I let them do the full detail and it always has turned out great.</p>
            <h6>Josh Williams</h6>
            <span>Toyota Avensis</span>
         </li>
      </ul>
      <!-- Navigation -->
      <div class="template-component-testimonial-list-navigation">
         <a href="#" class="template-component-testimonial-list-navigation-left template-icon-meta-arrow-large-rl"></a>
         <span class="template-component-testimonial-list-navigation-center template-icon-feature-testimonials"></span>
         <a href="#" class="template-component-testimonial-list-navigation-right template-icon-meta-arrow-large-rl"></a>
      </div>
   </div>
</div>
2

Do you have a live version?

3

Hey there, I plan on downloading it and taking a look, but I wanted to let you know about GitHub pages.

If you enable GitHub pages for your project, assuming the site is a static site (as yours seems to be), GitHub will host it for free. That’ll let others look at your live site without needing to download it and open it on their own computers.

https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages

4

So, unfortunately, when I try the site on my own computer in both Chrome and Firefox, the next testimonial button is working just fine.

I think what is happening is that for some reason, on your local environment, part of the Javascript necessary for that button isn’t loading or is not working. Therefore, the browser is just treating it as a simple anchor link. And if an anchor link is pointed to # such as <a href="#">Link</a>, then it’ll go to the top of the page.

To fix it, you need to figure out why your JavaScript isn’t loading correctly.

Nice looking site, by the way.

5

Thanks for letting me know about Github pages and all of the other information you provided me. You was right in terms of the local environment issue.

Once again thanks!

1 Like