Dev {Tricks}

You are here: Home / Archives for jQuery Plugins

by

Accordion Toggle

Toggle up and down arrows in a simple accordion widget

HTML Markup

<div class="accordion">
<div class="accordion-head">
<h4 style="font-size:40px;margin:6px 0 10px 0">⬇</h4>

</div>
<div class="accordion-body">
<p> <span><strong>أرسل بحثك للتحكيم معنا</strong></span> <span>“لا تضيع فرصة النشر في احد افضل المجلات العلمية العربية”</span> <button><a href="https://ajsrp.com/send/">أرسل بحثك هنا</a></button></p> 
</div>

</div>

CSS

/*Accordian*/
.accordion {
width: 100%;
position:fixed;
right:0px;
top:0;
z-index:9999;
}
.accordion .accordion-head {
color: #fff;
background-color: #EB5B31;
position: relative;
padding: 0 4px;
cursor: pointer;
border-top: 0;
float:right;
margin-right:20px;
border-left:5px solid #fff;
border-right:5px solid #fff;
border-bottom:5px solid #fff;
border-radius:0 0 10px 10px; 
}
.accordion .accordion-head * {
cursor: pointer;
}
.accordion .accordion-head:hover {
opacity: 1;
}
.accordion .accordion-head {
opacity: 0.85;
transition:0.5s;


}
.accordion .accordion-body {
padding: 2px 20px;
height: auto;
display: block;
background: #EB5B31;
color:#ffffff;
text-align:center;
}
.accordion-body button {
margin: 0;
padding: 6px 10px;
background: #111;
border: 0;
border-radius: 6px;
}
.accordion-body button a {
background: #111;
color: #fff;
}
.accordion-body p {
margin: 6px;
}

Javascript (jQuery)

//Accordian
$('.accordion').each(function () {
var $accordian = $(this);
$accordian.find('.accordion-head').on('click', function () {
$accordian.find('.accordion-body').slideUp();
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
$('h4',this).text("⬆").css("font-size","40px");
}else{
$('h4',this).text("⬇").css("font-size","40px");
}
});
});

 

by

Slick – Carousel you’ll ever need

Features

    • Fully responsive. Scales with its container.
    • Separate settings per breakpoint
    • Uses CSS3 when available. Fully functional when not.
    • Swipe enabled. Or disabled, if you prefer.
    • Desktop mouse dragging
    • Infinite looping.
    • Fully accessible with arrow key navigation
    • Add, remove, filter & unfilter slides
  • Autoplay, dots, arrows, callbacks, etc…

Demo link

Download

Adding RTL option

Just add the following css

.slick-slider .slick-track, .slick-slider .slick-list {
direction: ltr;
}

Responsive Slick

Add following lines to javascript.

 responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]

 

 

by Leave a Comment

How to add Bx Slider or Bx Carousel Slider to your website

Easy simple three steps.

Step One

Add following markup where you want to show the slider or carousel

<div class="dev-bdhostit">
	<div><img src="photo1.jpg"></div>
	<div><img src="photo2.jpg"></div>
	<div><img src="photo3.jpg"></div>
	<div><img src="photo7.jpg"></div>
	<div><img src="photo4.jpg"></div>
	<div><img src="photo5.jpg"></div>
	<div><img src="photo6.jpg"></div>
	<div><img src="photo8.jpg"></div>
	<div><img src="photo9.jpg"></div>
</div>

Step Two

Link jquery script of Bx Slider.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>

<script type="text/javascript">

$('.dev-bdhostit').bxSlider({
  auto: true,
  autoControls: true,
  stopAutoOnClick: true,
  minSlides: 1,
			  maxSlides: 8,
			  moveSlides: 1,
			  slideWidth: 250,
			  slideMargin: 10,
});

</script>

Add the above line before closing of </body> tag.

Step Three

Link css script of Bx Slider.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />

Add the above line before closing of </head> tag.