Bootstrap 4 Responsive Carousel News Slider Example

Today, We want to share with you Bootstrap 4 Responsive Carousel News Slider Example.In this post we will show you carousel images, hear for bootstrap slider bar we will give you demo and example for implement.In this post, we will learn about bootstrap 4 carousel fade in fade out effect with an example.

We are customise bootstrap 4 carousel slider like news slider. in this slider when image change after that sidebar title would also auto change automatic. we are display slider image with sidebar title list. You can also display some description on slider image with news slider bootstrap. you can also click on sidebar title after that also auto change bootstrap carousel slider with thumbnails.

Bootstrap 4 Carousel Responsive News Slider

news slider bootstrap,news slider,bootstrap news slider,news slider,carousel bootstrap 4 example,bootstrap 4 carousel fade
Bootstrap 4 Responsive Carousel News Slider Example

We allows to free Articles of bootstrap carousel slider with title with description , you can 100% free download full source code of bootstrap carousel news slider responsive layout. Here in this post We would give you demo of bootstrap carousel multiple items post and you would get simple code of bootstrap 4 carousel fade html, css and jquery. In bootstrap carousel auto slide post i give you 3 sections with html, css with JavaScript, you can simple get the source code of bootstrap carousel fade layout.

Bootstrap 4 Carousel With Title And Description News Slider

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap 4 Carousel fade News Slider Example - www.pakainfo.com</title>
	<link rel="stylesheet" type="text/css" href="custom.css">
  <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="hedding"><h1>SLIDER</h1></div>
    <div id="bootstrapNewsSlider" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://fantatours.com/wp-content/uploads/2016/03/%E5%8C%85%E5%81%89%E6%B9%963.jpg">
           <div class="carousel-caption">
            <h4><a href="http://www.pakainfo.com" target="_blank" class="label label-danger" rel="noopener noreferrer">Best Soundproof Insulation</a></h4>
            <p>simple definition of the Insulation is a one type of the key piece to obtain the best possible soundproofing in your superb home. That’s why We have decided to go in-depth about such topic soundproof insulation with talk about what you can get out of the best soundproofing insulation on the market. In addition to sharing some of the best products you can use on your best soundproofing for walls with ceilings, we will as well as describe the basics of insulation.<a class="label label-primary" href="http://www.pakainfo.com" target="_blank" rel="noopener noreferrer">Pakainfo snippets</a></p>
          </div>
        </div>
         <div class="item">
          <img src="http://bcdn.newshunt.com/cmd/resize/400x400_60/fetchdata13/images/95/ef/86/95ef86e84e908cc208cbb8f15808ba20.jpg">
           <div class="carousel-caption">
            <h4><a href="http://www.pakainfo.com" target="_blank" class="label label-danger" rel="noopener noreferrer">Yards In A Mile Online Conversion Formula</a></h4>
            <p> Simple Definition: A foot (symbol as a : ft) is a total unit of length in the imperial as well as US customary structure of pure or confirm measurement. A foot was declared as exactly data of the 0.3048 meters in year of the 1959. One(1) foot meaning of the 12 inches, as well as one(1) yard is meaning of (3)three feet.<a class="label label-primary" href="http://www.pakainfo.com" target="_blank" rel="noopener noreferrer">Pakainfo snippets</a></p>
          </div>
        </div>
        <div class="item">
          <img src="http://www.eco-u.org/wp-content/uploads/2017/06/20170613_143901-760x400.jpg">
           <div class="carousel-caption">
            <h4><a href="http://www.pakainfo.com" target="_blank" class="label label-danger" rel="noopener noreferrer">The Top 10+ Best Webinar Software Platforms For 2020-2021</a></h4>
            <p>Webinar software tools are well connected for anyone looking to generate online video conferences. Picking the great webinar hosting plateful stage for your business needn't be hard. We cover pros, cons & pricing for Zoom, Webinar Jam, GoToWebinar, Demio & free of charge options like Google Hangouts on Air and pre-recorded like Ever Webinar.<a class="label label-primary" href="http://www.pakainfo.com" target="_blank" rel="noopener noreferrer">Pakainfo snippets</a></p>
          </div>
        </div>
        <div class="item">
          <img src="https://thedetailedhistory.com/wp-content/uploads/2017/12/Inca-Empire-Stronghold-760x400.jpg">
           <div class="carousel-caption">
            <h4><a href="http://www.pakainfo.com" target="_blank" class="label label-danger" rel="noopener noreferrer">Overview Of East Liverpool Review (East Liverpool, Ohio)</a></h4>
            <p>The Simple defination of the Review is a daily based local network through newspaper platform in East Liverpool, university of the Ohio as well as spme Most imp serving the best city of new East Liverpool, all the main southern Columbiana County, Ohio with an northern Hancock Big County, West Virginia etc. <a class="label label-primary" href="http://www.pakainfo.com" target="_blank" rel="noopener noreferrer">Pakainfo snippets</a></p>
          </div>
        </div>
        <div class="item">
          <img src="https://i.pinimg.com/originals/ae/e1/9d/aee19dd188b3bc65525c2ff95151a35d.jpg">
           <div class="carousel-caption">
            <h4><a href="http://www.pakainfo.com" target="_blank" class="label label-danger" rel="noopener noreferrer">What Is Putlocker || Why Is It So Putlocker !!</a></h4>
            <p>PutLocker is a UK-based cloud storage website that allows anyone to upload as well as share any type of file with anyone in the world regardless of file type, size or format. PutLocker uses the BOGOF financial model allowing people to use the site for free, as well as unlock additional features for a monthly fee.<a class="label label-primary" href="http://www.pakainfo.com" target="_blank" rel="noopener noreferrer">Pakainfo snippets</a></p>
          </div>
        </div>
      </div>
      <ul class="list-group col-sm-4">
        <li data-target="#bootstrapNewsSlider" data-slide-to="0" class="list-group-item active"><h4>Best Soundproof Insulation</h4></li>
        <li data-target="#bootstrapNewsSlider" data-slide-to="1" class="list-group-item"><h4>Yards In A Mile Online Conversion Formula</h4></li>
        <li data-target="#bootstrapNewsSlider" data-slide-to="2" class="list-group-item"><h4>The Top 10+ Best Webinar Software Platforms For 2020-2021</h4></li>
        <li data-target="#bootstrapNewsSlider" data-slide-to="3" class="list-group-item"><h4>Overview Of East Liverpool Review (East Liverpool, Ohio)</h4></li>
        <li data-target="#bootstrapNewsSlider" data-slide-to="4" class="list-group-item"><h4>What Is Putlocker || Why Is It So Putlocker !!</h4></li>
      </ul>
      <div class="carousel-controls">
          <a class="left carousel-control" href="#bootstrapNewsSlider" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#bootstrapNewsSlider" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
      </div>
    </div>
</div>
</body>
</html>

Javascript code

$(document).ready(function(){
    
	var pakainfoEvent = false;
	$('#bootstrapNewsSlider').carousel({
		interval:   4000	
	}).on('click', '.list-group li', function() {
			pakainfoEvent = true;
			$('.list-group li').removeClass('active');
			$(this).addClass('active');		
	}).on('slid.bs.carousel', function(e) {
		if(!pakainfoEvent) {
			var count = $('.list-group').children().length -1;
			var current = $('.list-group li.active');
			current.removeClass('active').next().addClass('active');
			var id = parseInt(current.data('slide-to'));
			if(count == id) {
				$('.list-group li').first().addClass('active');	
			}
		}
		pakainfoEvent = false;
	});
})

$(window).load(function() {
    var boxheight = $('#bootstrapNewsSlider .carousel-inner').innerHeight();
    var itemlength = $('#bootstrapNewsSlider .item').length;
    var triggerheight = Math.round(boxheight/itemlength+1);
	$('#bootstrapNewsSlider .list-group-item').outerHeight(triggerheight);
});

CSS Source code

body { 
	padding-top: 50px;
	font-family: 'Abel', sans-serif !important;
}
.hedding h1{
	color:#000;
	font-weight: bold;
	text-shadow: 0px 2px 3px #E26302;
}
.carousel-caption a{
	color:#fff;
	font-weight: bold;
}
.carousel-caption p a{
	color:#fff;
	font-size:12px;
	letter-spacing:2px;
}
#bootstrapNewsSlider .carousel-caption {
    left:0;
	right:0;
	bottom:0;
	text-align:left;
	padding:10px;
	background:rgba(0,0,0,0.6);
	text-shadow:none;
}
#bootstrapNewsSlider .list-group {
	position:absolute;
	top:0;
	right:0;
}
#bootstrapNewsSlider .list-group-item{
	padding:0px 10px !important;
	border-radius:0px;
	cursor:pointer;
	height:81px;
	color:#fff;
	overflow: hidden;
	background-color:#000 !important;
}
#bootstrapNewsSlider .list-group .active {
	background-color: #E26302 !important;
	border:1px solid #fff !important;
}
@media (min-width: 992px) { 
	#bootstrapNewsSlider {padding-right:33.3333%;}
	#bootstrapNewsSlider .carousel-controls {display:none;} 	
}
@media (max-width: 991px) { 
	.carousel-caption p,
	#bootstrapNewsSlider .list-group {display:none;} 
}

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about bootstrap image slider with thumbnail.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   jQuery Find Nested Parent Child Elements HTML DOM
  2.   How to get current url with or without query string using Vuejs
  3.   Send Windows Push Notification Services using PHP
  4.   Laravel 5.8 Form Validation Using Jquery
  5.   Laravel Selecting and Aliasing Columns in Eloquent's query
  6.   ASP.NET Page life cycle with Events
  7.   Get first and last value of ul li using jQuery
  8.   jQuery Disable onClick Event listeners
  9.   Bootstrap carousel slider with thumbnail image gallery
  10.   Laravel Create Custom Helper Class Example