Section JS isn't running

Highlighted
New Member
1 0 0

Shopify editor previewShopify editor preview

 

 

 

Local HTML file resultLocal HTML file result
I added a section of customer reviews on the home page. That would show 3 customer reviews in a carousel. It's showing 3 customer reviews in a carousel perfectly on my local HTML file. But JS isn't working in my Shopify code integration. It doesn't show the text div when section loads. But when I hit left right arrows button, then JS runs and display the customer review div perfectly.

<style>

.customer_review_title {
  padding: 0px 2px 0px 2px;
  font-family: $accentFontStack;
}  
.testimonials_content_container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.testimonials_container {
  	display:none;
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
    font-family: $accentFontStack;
    line-height: 1.7;
  	align-text: center;
    padding: 30px 20px 0px 12px;
    -webkit-font-smoothing: antialiased;
  	border: 3px solid rgb(255, 255, 255);
    margin: 9px;
}
.testimonials_div {
  	height: auto;
    text-align: center;
    background-color: #ec6464;
    self-alig: center;
    margin: auto;
    width: 50%;
    padding: 10px;
    color: white;
  	box-shadow: 7px 8px #cdcdcd;
}
  .testimonials_content_container > .left_testimonials_div_arrow {
   outline:none;
   position: absolute;
   float: left;
   width: 4vw;
   height: 4vw;
   border-radius: 50%;
   border: none;
   background: cdcdcd;
   top: 50%;
   left: 15;
   margin-top: -9px;
}
  .testimonials_content_container > .right_testimonials_div_arrow {
   outline:none;
   position: absolute;
   width: 4vw;
   height: 4vw;
   border-radius: 50%;
   border: none;
   background: cdcdcd;
   top: 50%;	
   right: 0%;
   margin-top: -9px;
}
.commentor_names {
    text-align: center;
    font-style: italic;
}

@media screen and (min-width: 300px) {  
	.testimonials_container { font-size:0.7em;  }
	.qouteMarks {font-size:3.2em; line-height: 0px;}
	.testimonials_div {width:70%;}
	.star {font-size:1.5em; color:yellow;}
}

@media screen and (min-width: 400px;) {
	.testimonials_container { font-size:1.0em;  }
	.qouteMarks {font-size:3.2em; line-height: 0px;}
	.testimonials_div {width:70%;}
	.star {font-size:1.6em; color:yellow;}
}


@media screen and (min-width: 500px )  {  .testimonials_container  { font-size:1.2em;  } .qouteMarks {font-size:1.9em; line-height: 0px;} .testimonials_div {width:70%;} .star {font-size:2.0em; color:yellow;}}
@media screen and (min-width: 600px)  {  .testimonials_container  { font-size:1.2em;  } .qouteMarks {font-size:1.9em; line-height: 0px;} .testimonials_div {width:70%;} .star {font-size:2.0em; color:yellow;}}
@media screen and (min-width: 700px)  {  .testimonials_container  { font-size:1.2em;  } .qouteMarks {font-size:1.9em; line-height: 0px;} .testimonials_div {width:70%;} .star {font-size:2.0em; color:yellow;}}
@media screen and (min-width: 800px)  {  .testimonials_container  { font-size:1.2em;  } .qouteMarks {font-size:2.1em; line-height: 0px;} .testimonials_div {width:70%;} .star {font-size:2.0em; color:yellow;}}
@media screen and (min-width: 900px)  {  .testimonials_container  { font-size:1.2em;  } .qouteMarks {font-size:2.1em; line-height: 0px;} .star {font-size:2.0em; color:yellow;}}
@media screen and (min-width: 1000px) {  .testimonials_container  { font-size:1.2em;  } .qouteMarks {font-size:3.2em; line-height: 0px;} .star {font-size:2.2em; color:yellow;}}
@media screen and (min-width: 1100px) {  .testimonials_container  { font-size:1.2em;  } .qouteMarks {font-size:3.2em; line-height: 0px;} .star {font-size:2.4em; color:yellow;}}
@media screen and (min-width: 1200px) {  .testimonials_container  { font-size:1.2em;  } .qouteMarks {font-size:3.2em; line-height: 0px;} .star {font-size:2.4em; color:yellow;}}
@media screen and (min-width: 1300px) {  .testimonials_container  { font-size:1.2em;  } .qouteMarks {font-size:3.8em; line-height: 0px;} .star {font-size:2.4em; color:yellow;}}
@media screen and (min-width: 1400px) {  .testimonials_container  { font-size:1.2em;  } .qouteMarks {font-size:3.2em; line-height: 0px;} .star {font-size:2.4em; color:yellow;}}
@media screen and (min-width: 1500px) {  .testimonials_container  { font-size:1.2em;  } .qouteMarks {font-size:3.2em; line-height: 0px;} .star {font-size:2.4em; color:yellow;}}
@media screen and (min-width: 1500px) {  .testimonials_container  { font-size:1.2em;  } .qouteMarks {font-size:3.2em; line-height: 0px;} .star {font-size:2.4em; color:yellow;}}
@media screen and (min-width: 1600px) {  .testimonials_container  { font-size:1.2em;  } .qouteMarks {font-size:3.2em; line-height: 0px;} .star {font-size:2.4em; color:yellow;}}
@media screen and (min-width: 1700px) {  .testimonials_container  { font-size:1.2em;  } .qouteMarks {font-size:3.2em; line-height: 0px;} .star {font-size:2.4em; color:yellow;}}
</style>

<h2 class="customer_review_title">Our Happy Customers</h2>
<div class="testimonials_content_container">
  <div class="testimonials_div">
  	<span class="star">&starf;</span>
    <span class="star">&starf;</span>
    <span class="star">&starf;</span>
    <span class="star">&starf;</span>
    <span class="star">&starf;</span>
    
    <div class="testimonials_container">
    	<p><span class="qouteMarks">&ldquo;</span>I do love jewelry designs that are unique, delicate and striking. Not to mention the quality - just gorgeous. I'm so glad I found you! Very happy with my necklace.</p>
    	<p class="commentor_names">Lisa - NY, USA</p>
    </div>
      
    <div class="testimonials_container">
    	<p><span class="qouteMarks">&ldquo;</span>I have bought JS DOTS jewelry for myself, my friends and my family. All pieces are beautiful quality and exactly as they appear on the website. Beautiful designed and finished.</p>
    	<p class="commentor_names">Marianna - MELB, Australia</p>
    </div>	

    <div class="testimonials_container">
    	<p><span class="qouteMarks">&ldquo;</span>The multi-layeed necklace I purchased is exquisite! It's unique, delicate and made with obvious love and care. The necklace arrived promptly and was nicely presented.</p>
    	<p class="commentor_names">Jaelyn - Houston, TX</p>
    </div>
    
  </div>

  <button class="left_testimonials_div_arrow" onclick="plusDivs(-1)">&#10094;</button>
  <button class="right_testimonials_div_arrow" onclick="plusDivs(1)">&#10095;</button>
</div>

{% javascript %}
    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
      showDivs(slideIndex += n);
    }

    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("testimonials_container");
      if (n > x.length) {slideIndex = 1}
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";  
      }
      x[slideIndex-1].style.display = "block";  
    }
{% endjavascript %}

{% schema %}
  {
   "name": "Customer Reviews",
   "settings": [],
  	"presets": [{
    "name": "Testimonials",
    "category": "Text"
  	}]
}
{% endschema %}

 

0 Likes