滑动时弹性滑块滑动多个(垂直旋转木马)

时间:2018-05-05 22:48:25

标签: javascript jquery html css

我是Elastislide的造型师,当我滑动时,我注意到它在我的情况下跳过很多li或评论???

我在标题中添加了数字,它将从3到8跳过

4 5 6 7将不会显示

这是一个例子

https://jsfiddle.net/35q41d6q/

<div class="product_rating">
    <div class="top_slider">
        <span class="stamped-reviews-rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <span class="slider_date">2017/5/32</span>
        </span>
    </div>
    <p class="slider_title">Compact, Portable & Functional1</p>
    <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/...">
    <span class="slider_review">Slim bottle that fits perfectly in my
        handbag. Bought the A6 memobottle with the collapsible funnel 
        for easy pouring of water. Purchase was value for money.</span>
    <p class="slider_user_name">Brian A</p>
</div>

如何解决此问题

1 个答案:

答案 0 :(得分:0)

它不会以这种方式工作,就像你试图改变它一样。最重要的是,这个回购似乎被放弃了,因为2015年的问题甚至没有被回购所有者解决过。

无论如何,要按照您尝试的方式进行更改,首先需要了解脚本实际执行的操作。如果您必须在li中添加自定义HTML并使用滑块,则需要查看它如何分配max-widthwidth,而不是试图强制覆盖它的CSS。

调查jquery.elastislide.js它正在做什么,它将max-width分配给_setItemSize()函数中的项目/ lis,它使用imgSize对象&{ #39; s属性widthmax-width css属性分配给项目。

this.$items.css({
    'width': w + '%',
    'max-width': this.imgSize.width,
    'max-height': this.imgSize.height
});

现在,如果你回溯,你会发现这个imgSize对象实际上是保存的原始图片尺寸(widthheight),它位于_layout()函数内

var $img = this.$items.find('img:first');
this.imgSize = {
    width: $img.outerWidth(true),
    height: $img.outerHeight(true)
};

当加载所有图像时,在init()函数内部调用回溯时。

这表明li大小总是取决于第一个li中的第一个图像大小,因为它使用$img.outerWidth(true),true,这意味着它将获得当前计算的外部宽度(包括填充,对于匹配元素集合中第一个元素的边框和可选边距,但它将在其中分配与图像相同的尺寸,并且第一个li var $img = this.$items.find('img:first');内的第一个元素也是如此。因为它确实获得了所有li和它们内部的第一个图像,但仅使用第一个li的图像尺寸来分配所有项目/ lis。

现在你完全不同的做法是你在锚点中添加嵌套的HTML并且图像的尺寸更小,所以实际上,你强迫布局显示你想要的宽度,但插件javascript使用与上面定义相同的逻辑计算尺寸,从而滑动lis的数量。

您有2个选项

  • 更改来源中的逻辑(我不会因为这需要很多时间,也许不会。)

  • 愚弄滑块

如何欺骗滑块是因为您可以通过提供display:none的空白图像以及您想要滑块或li的图块的实际尺寸来欺骗滑块,它会自动显示获取尺寸并相应地移动和计算滑块。

我已创建并上传了空白图片BLANK.GIF,因此您可以根据CSS设置下载我创建的290x161。如果要更改磁贴的大小并进行相应调整,可以对其进行修改。

请参阅下面的演示我在第一个li中添加了一个空白图像,现在所有幻灯片都将正确滑动。以完整模式运行演示

希望这会有所帮助,如果您想要跳过幻灯片或做其他事情,那么我应该做的就是你应该做的其余事情,你应该先挖掘代码然后再实施。

&#13;
&#13;
$('#carousel').elastislide({
  orientation: 'horizontal',

  // sliding speed
  speed: 1000,

  // sliding easing
  easing: 'ease-in-out',

  // the minimum number of items to show.
  // when we resize the window, this will make sure minItems are always shown
  // (unless of course minItems is higher than the total number of elements)
  minItems: 5,

  // index of the current item (left most item of the carousel)
  start: 0,
});
&#13;
.slider_container {
  /* max-width: 1250px; */
  font-family: 'Lato', Calibri, Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: #333;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

#carousel {
  max-height: 145px !important;
}

#carousel li {
  max-width: 290px !important;
  max-height: 161px !important;
}

#carousel .fa-star {
  font-size: 15px;
}

#carousel .slider_review {
  width: 100%;
  white-space: normal !important;
  color: #2b2b2b;
  display: inline-block;
  height: 87px;
  padding-bottom: 20px;
  padding-right: 0;
  vertical-align: top;
  font-size: 13px;
  text-align: left;
}

#carousel .slider_title {
  font-weight: bold;
  margin-bottom: 3px;
  font-size: 13px;
  width: auto;
  line-height: 21px;
  margin-top: 2px;
}

#carousel .slider_user_name {
  margin-top: 6px;
  font-weight: bold;
  position: relative;
  top: -12px;
  font-size: 13px;
}

#carousel a {
  color: #555;
  text-decoration: none;
}

#carousel .top_slider {
  position: relative;
  top: -2px;
}

#carousel .slider_date {
  float: right;
  margin-right: 15px;
  font-size: 10px;
  margin-top: 3px;
}

.slider_images {
  display: inline-block !important;
  float: left;
  height: 80px;
  width: 80px;
  margin-right: 10px;
  vertical-align: top;
  text-align: center;
  position: relative;
  z-index: 9;
  border: 1px solid #ddd !important;
  padding: 3px;
  border-radius: 5px;
  background: white;
}

.slider_upper_section {
  margin-bottom: 7px;
}

.slider_upper_stars {
  float: right;
  margin-right: 30px;
}

.slider_upper_title {
  font-weight: bold;
  margin-left: 15px;
}
&#13;
<script src="https://omaraslam.com/modernizr.js"></script>
<link href="https://areviewsapp.com/css/slider/elastislide.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://omaraslam.com/elastislide.js"></script>

<div class="slider_container demo-1">
  <div class="slider_upper_section">
    <span class="slider_upper_title">What our customers have to say...</span>
    <span class="slider_upper_stars">
                         <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span >120 Reviews</span>

    </span>
  </div>

  <!-- Elastislide Carousel -->
  <ul id="carousel" class="elastislide-list">
    <li>
      <img src="https://omaraslam.com/blank.png" style="display:none">
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional1</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional2</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional3</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional4</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional5</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional6</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional7</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional8</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional9</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional10</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional11</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional12</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional13</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional14</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional15</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional16</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional17</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          <div class="product_rating">
            <div class="top_slider">
              <span class="stamped-reviews-rating">
                                            <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                            <span class="slider_date">2017/5/32</span>
              </span>
            </div>
            <p class="slider_title">Compact, Portable & Functional18</p>
            <img class="slider_images" width="72" src="https://s3-us-west-2.amazonaws.com/stamped.io/uploads/productImages/thumb/28_8586632067.jpg?AWSAccessKeyId=AKIAJZP6NJTFV3IFIHLQ&Expires=2147472000&Signature=SsdO7t34Kfp3sDm7bzW4%2BfM48BM%3D">
            <span class="slider_review">Slim bottle that fits perfectly in my handbag. Bought the A6 memobottle with the collapsible funnel for easy pouring of water. Purchase was value for money.</span>
            <p class="slider_user_name">Brian A</p>
          </div>
        </div>
      </a>
    </li>

  </ul>
  <!-- End Elastislide Carousel -->
</div>
&#13;
&#13;
&#13;