HTML-CSS-JS如何将其转换为“文本轮播”？

Question

I am trying to recreate a 'text carousel' without any help. 我试图在没有任何帮助的情况下重新创建“文本轮播”。 I've currently made this (stretch it out, it's not yet responsive). 我目前已经做到了（将其扩展出来，它尚未响应）。 Here is what I'm trying to recreate scroll down to the testimonials section. 这是我尝试重新创建的内容，向下滚动到“推荐”部分。 I've checked their site but they've done this with the use of Bootstrap, I'm trying to recreate it without, only with html, css and probably javascript. 我已经检查了他们的网站，但是他们已经通过使用Bootstrap做到了这一点，我尝试不使用html，css甚至是javascript来重新创建它。

I've check on codepen for text carousels but they are mostly with only one text field and I want to have at least two. 我已经在Codepen上检查了文本轮播，但是它们大多只有一个文本字段，我希望至少有两个。

Thanks for helping me out. 谢谢你的协助。

PS: The .fa-angle-left and .fa-angle-right are from FontAwesome but I've quickly replaced them with an image from google. PS： .fa-angle-left和.fa-angle-right来自FontAwesome，但我很快用Google的图片替换了它们。

Answer 1

As I can see, you are trying to learn to do it yourself and that's awesome! 正如我所看到的，您正在尝试自己学习，这真棒！ Keep the good work! 保持良好的工作！

There's multiple ways to achieve this behavior. 有多种方法可以实现此行为。 I won't write the code for you, but here are some steps for you to try and learn: 我不会为您编写代码，但是以下是一些您可以尝试和学习的步骤：

First, add more .tekstbalonvolledig divs so you can test it. 首先，添加更多.tekstbalonvolledig div，以便对其进行测试。

Second the CSS part: 其次是CSS部分：

1 - Add a .wrapper div around .tekstbalonvolledig divs with 1000px width 1-在宽度为1000px的.tekstbalonvolledig div周围添加.wrapper div

2 - Add overflow: hidden to .overlaycontainer 2-添加overflow: hidden到.overlaycontainer

Now the JS part: 现在，JS部分：

1 - Create a function that animates a margin-left of -500px on the .wrapper 1-创建一个在.wrapper上为-500px的左边距动画的函数

2 - Add a click event listener to you .fa-angle-left to run this function 2-向您添加click事件监听器.fa-angle-left以运行此功能

Of course there's a lot more things to implement on your carousel, but I hope this will help you to begin :) 当然，您的轮播上还有很多事情要实现，但是我希望这会帮助您开始:)

Answer 2

Below is the code for carousel.. 以下是轮播的代码。

Below is HTML code 以下是HTML代码

 <head>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
 </head>
  <section id="carousel">                   
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="quote"><i class="fa fa-quote-left fa-4x"></i></div>
            <div class="carousel slide" id="fade-quote-carousel" data-ride="carousel" data-interval="3000">
              <!-- Carousel indicators -->
              <ol class="carousel-indicators">
                <li data-target="#fade-quote-carousel" data-slide-to="0"></li>
                <li data-target="#fade-quote-carousel" data-slide-to="1"></li>
                <li data-target="#fade-quote-carousel" data-slide-to="2" class="active"></li>
                <li data-target="#fade-quote-carousel" data-slide-to="3"></li>
                <li data-target="#fade-quote-carousel" data-slide-to="4"></li>
                <li data-target="#fade-quote-carousel" data-slide-to="5"></li>
              </ol>
              <!-- Carousel items -->
              <div class="carousel-inner">
                <div class="item">
                    <div class="profile-circle" style="background-color: rgba(0,0,0,.2);"></div>
                    <blockquote>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
                    </blockquote>   
                </div>
                <div class="item">
                    <div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
                    <blockquote>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
                    </blockquote>
                </div>
                <div class="active item">
                    <div class="profile-circle" style="background-color: rgba(145,169,216,.2);"></div>
                    <blockquote>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
                    </blockquote>
                </div>
                <div class="item">
                    <div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
                    <blockquote>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
                    </blockquote>
                </div>
                <div class="item">
                    <div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
                    <blockquote>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
                    </blockquote>
                </div>
                <div class="item">
                    <div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div>
                    <blockquote>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p>
                    </blockquote>
                </div>
              </div>
            </div>
        </div>                          
    </div>
</div>
</section>

Below is the css 下面是css

         section {
padding-top: 100px;
padding-bottom: 100px;
       }

          .quote {
color: rgba(0,0,0,.1);
text-align: center;
margin-bottom: 30px;
     }
     #fade-quote-carousel.carousel {
  padding-bottom: 60px;
     }
   #fade-quote-carousel.carousel .carousel-inner .item {
   opacity: 0;
      -webkit-transition-property: opacity;
  -ms-transition-property: opacity;
      transition-property: opacity;
     }
    #fade-quote-carousel.carousel .carousel-inner .active {
     opacity: 1;
     -webkit-transition-property: opacity;
     -ms-transition-property: opacity;
      transition-property: opacity;
    }
 #fade-quote-carousel.carousel .carousel-indicators {
       bottom: 10px;
    }
#fade-quote-carousel.carousel .carousel-indicators > li {
     background-color: #e84a64;
     border: none;
    }
 #fade-quote-carousel blockquote {
        text-align: center;
        border: none;
     }
   #fade-quote-carousel .profile-circle {
     width: 100px;
    height: 100px;
     margin: 0 auto;
     border-radius: 100px;
    }

Below is the fiddle link https://bootsnipp.com/snippets/featured/testimonial-carousel 以下是小提琴链接 https://bootsnipp.com/snippets/featured/testimonial-carousel

Dont forget to include bootstrap and jquery library files 不要忘记包括引导程序和jQuery库文件

HTML-CSS-JS如何将其转换为“文本轮播”？

问题描述

2 个解决方案

解决方案1
0 2017-05-23 17:04:55

解决方案2
0 2017-05-23 17:35:03

HTML-CSS-JS如何将其转换为“文本轮播”？

问题描述

2 个解决方案

解决方案1 0 2017-05-23 17:04:55

解决方案2 0 2017-05-23 17:35:03

解决方案1
0 2017-05-23 17:04:55

解决方案2
0 2017-05-23 17:35:03