"Vertical Carousel News Flow (Timeline)"
Bootstrap 4.0.0 Snippet by serkanbasdag

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="card border-danger golge"> <div class="card-header"><a href="anasayfa.html" class="isteColor"> <h5 class="text-center m-2" style="font-weight: bold">NEWS FLOW</h5> </a></div> <div class="card-body"> <div class="carousel vert slide" data-ride="carousel" data-interval="2000"> <div class="carousel-inner"> <div class="carousel-item active"> <ul class="timeline"> <li> <!--"_blank" tıklanan linkin yeni sekmede açılmasını sağlar.--> <a target="_blank" href="#">News Headline</a> <a href="#" class="float-right">09 Ocak, 2019</a> <p class="article">>Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..</p> </li> <hr> <li> <a href="#">News Headline</a> <a href="#" class="float-right">4 Temmuz, 2018</a> <p>Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..</p> </li> <hr> <li> <a href="#">News Headline</a> <a href="#" class="float-right">4 Temmuz, 2018</a> <p>Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..</p> </li> </ul> </div> <div class="carousel-item"> <ul class="timeline"> <li> <a href="#">News Headline</a> <a href="#" class="float-right">09 Ocak, 2019</a> <p class="article">>Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..</p> </li> <hr> <li> <a href="#">News Headline</a> <a href="#" class="float-right">4 Temmuz, 2018</a> <p>Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..</p> </li> <hr> <li> <a href="#">News Headline</a> <a href="#" class="float-right">4 Temmuz, 2018</a> <p>Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..</p> </li> </ul> </div> </div> </div> </div> </div> </div> </div>
.isteColor{ color: #cd2147; } .isteColor:hover{ color: #353A40; } /*haber akışı list*/ ul.timeline { list-style-type: none; position: relative; } ul.timeline:before { content: ' '; background: #d4d9df; display: inline-block; position: absolute; left: 29px; width: 2px; height: 100%; z-index: 400; } ul.timeline > li { margin: 20px 0; padding-left: 20px; } ul.timeline > li:before { content: ' '; background: white; display: inline-block; position: absolute; border-radius: 50%; border: 3px solid #cd2147; left: 20px; width: 20px; height: 20px; z-index: 400; } /*vertical carousel*/ .vert .carousel-item-next.carousel-item-left, .vert .carousel-item-prev.carousel-item-right { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .vert .carousel-item-next, .vert .active.carousel-item-right { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100% 0); } .vert .carousel-item-prev, .vert .active.carousel-item-left { -webkit-transform: translate3d(0,-100%, 0); transform: translate3d(0,-100%, 0); }

Related: See More


Questions / Comments: