Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Back to Sliders
Preview Source Code
Download
HTML
CSS
/**Typeo CSS if no need so remove it Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
*{
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  color: #444;
  box-sizing: border-box;
  margin: 0px;
}
/**Typeo CSS if no need so remove it Start**/

.cw-announcement-wrap {
  overflow: hidden;
  position: relative;
}
#cw-announcement-list {
  padding:2px 0; 
  min-height: 44px;
  display: flex;
  flex-flow: row wrap;
  align-items: center; 
  background-color: #000; 
  position: relative; 
  overflow: hidden; 
  width: 500000px;
}
#cw-announcement-list>.cw-item {
  letter-spacing: .04em;
  font-size: 12.6px; 
  font-weight: 400; 
  text-transform: uppercase;
  text-align: center;  
  color: #fff; 
  overflow: hidden; 
  padding: 0; 
  line-height: 1.1; 
  display: inline-block;
} 
.cw-announce-nav span {
  width: 28px;
  height: 28px;
  display: inline-block;
  position: absolute;
  z-index: 1;
  top: 50%;
  margin-top: -14px;
  cursor: pointer;
  background-color: #000;  
}
.cw-announce-nav span:before {
  content: '';
  width: 10px;
  height: 10px;
  border-left: #fff 2px solid;
  border-top: #fff 2px solid;
  display: inline-block;
  margin: 8px 6px 0 6px;
}
.cw-announce-nav span#cw-perv-announcement {
  left: 0;
}
.cw-announce-nav span#cw-perv-announcement:before {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-left:10px;
}
.cw-announce-nav span#cw-next-announcement {
  right: 0px;
}
.cw-announce-nav span#cw-next-announcement:before {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
JS
$(document).ready(function(e) {
 var windowwidth = $(window).width()
 $('#cw-announcement-list .cw-item, .cw-announcement-wrap').css({'width':windowwidth})
  $('#cw-perv-announcement').on('click', function(){
   var $last = $('#cw-announcement-list .cw-item:last');
   $last.remove().css({'margin-left':-windowwidth+'px'});
   $last.animate({'margin-left':'0px'},1000);
   $('#cw-announcement-list .cw-item:first').before($last);	
  })
$('#cw-next-announcement').on('click', function(){
  var windowwidth = $(window).width();
  var $first = $('#cw-announcement-list .cw-item:first');
	$first.animate({'margin-left':-windowwidth+'px'},1000, function(){
	$first.remove().css({'margin-left': '0px' });
	$('#cw-announcement-list .cw-item:last').after($first);	
	});	
  });
});
JS File

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *