Multi Item Carousel slide sample code

Here am going to show you how to add Multi Item Carousel slide in your website here is the Multi Item Carousel slide sample code

1) Script files to include in the header

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js" type="90e6e4b8e06878c6e6ff42b7-text/javascript"></script>

2)  CSS Part


<style type="text/css">
 .carousel-wrap {
 width: 1000px;
 margin: auto;
 position: relative;
 }
 .owl-carousel .owl-nav{
 overflow: hidden;
 height: 0px;
 }

 .owl-theme .owl-dots .owl-dot.active span, 
 .owl-theme .owl-dots .owl-dot:hover span {
 background: #2caae1;
 }


 .owl-carousel .item {
 text-align: center;
 }
 .owl-carousel .nav-btn{
 height: 47px;
 position: absolute;
 width: 26px;
 cursor: pointer;
 top: 100px !important;
 }

 .owl-carousel .owl-prev.disabled,
 .owl-carousel .owl-next.disabled{
 pointer-events: none;
 opacity: 0.2;
 }

 .owl-carousel .prev-slide{
 background: url(img/icon.png) no-repeat scroll 0 0;
 left: -33px;
 }
 .owl-carousel .next-slide{
 background: url(img/icon.png) no-repeat scroll -24px 0px;
 right: -33px;
 }
 .owl-carousel .prev-slide:hover{
 background-position: 0px -53px;
 }
 .owl-carousel .next-slide:hover{
 background-position: -24px -53px;
 }

 span.img-text {
 text-decoration: none;
 outline: none;
 transition: all 0.4s ease;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 cursor: pointer;
 width: 100%;
 font-size: 23px;
 display: block;
 text-transform: capitalize;
 }
 span.img-text:hover {
 color: #2caae1;
 }
</style>

 

3) JQuery script to initialize

 

 <script type="text/javascript">
 $(document).ready(function() {

 $('.owl-carousel').owlCarousel({
 loop: true,
 dots: false,
 margin: 10,
 nav: true,
 navText:["<div class='nav-btn prev-slide'></div><div class='nav-btn next-slide'></div>"],
 responsive: {
 0: {
 items: 1
 },
 600: {
 items: 3
 },
 1000: {
 items: 3
 }
 }
 });
 });
 </script>

4) Finally HTML

 

<div class="carousel-wrap" style="text-align: center;">
<div class="owl-carousel owl-theme">
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item"><img src="/img/tutorialshore.jpeg" />
<span class="img-text">tutorialshore</span></div>
<div class="item"><img src="/img/tutorialshore.jpeg" />
<span class="img-text">tutorialshore</span></div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
</div>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js" ></script>

</div>

See Demo>

How to Set a cookie attribute Samesite value in PHP ?

What is samesite cookie in php

We all know most of the website using cookie for sharing information between browsers and the server,so cookie is storing in the local browsers,so their is a probability of misused by other domain which we are using in out html code.for example when am adding Instagram images in my blog tutorialshore.com,i have to use Instagram domain name in my html code to point Instagram images, the cookies in the browser that belong to these other sites will also be sent.Therefore those third parties Instagram can track your activity by using Cookie. Fortunately we have cookie attribute called samesite,by setting a cookie to samesite strict we can prevent third party misuse of cookies.samesite cookie attribute having two values Strict and Lax.AS the name says Strict completely prevent the cookie will not be sent along with requests initiated by third party websites.But in the case of Lax only get method cookie will be sent along with requests initiated by third party websites

Method

 we have a method to accomplish this,which can be done by one of the most common function header() in php


Add cookie Samesite strict by using header() function 

add below header() functions in the top of your home page

header("Set-Cookie: key=value; path=/; domain=www.tutorialshore.com; HttpOnly; Secure; SameSite=Strict");

See how we can check a cookie is samesite, we can do with the help of chrome browser as we know almost every browser have the inspect element option, within inspect element tab we have the application section to check cookie see below image.
Click F12 function button go for application => cookies

set a cookie samesite value in PHP

How to make a cookie secure and httponly in PHP ?

As we know Cookie is often used for identifying user data, when user opening a website, cookie stores information about the user in the browser, Each time the same system requests a page with in a same browser, it will send the cookie too.So when we are considering about the security it is a programmer duty to make it more secure when it exchanging between browser and server,nowadays it is easy to access other website cookie and get the flow of the website using that cookie information.So here am going explain you how to make a cookie secure and httponly in PHP .we have lot of method to accomplish this task,lets have a look on it.

Method 1

Make cookie secure using PHP.ini 

if you have the permission to access php.ini you can open and add below code at the end of php.ini to make your cookie secure and httponly

session.cookie_httponly=On
session.cookie_secure=On

Method 2

if you don't have the permission to access php.ini file,fortunately we have another method to accomplish this, which can be done by one of the most common function ini_set();


Make cookie secure using ini_set() function

add below ini_set() functions in the top of your home page

ini_set('session.cookie_httponly',1);
ini_set('session.use_only_cookies',1);
ini_set('session.cookie_secure', 1);

Method 3

if you don't have the permission to access php.ini file,fortunately we have another method to accomplish this,which can be done by one of the most common function header() in php


Make cookie secure using header() function

add below header() functions in the top of your home page

header("Set-Cookie: key=value; path=/; domain=www.tutorialshore.com; HttpOnly; Secure; SameSite=Strict");

See how we can check a cookie is secure and httponly, we can do with the help of chrome browser as we know almost every browser have the inspect element option, within inspect element tab we have the application section to check cookie see below image.
Click F12 function button go for application => cookies

make a cookie secure and httponly in PHP

How to insert new key value pair inside a multidimensional associative array in PHP

To insert new key value pair inside a multidimensional associative array in PHP
Here am going to explain in details
We have a sample array we need to add Version4 and its value inside the array

$list_array = array( 
            0 => array (
               "Version1" => 2016,
               "Version2" => 2017,	
               "Version3" => 2018
            ),
            
            1 => array (
               "Version1" => 2016,
               "Version2" => 2017,	
               "Version3" => 2018
            )
         );

Here am using for each mange that

 foreach($list_array as $key=>$valuue)
	 {
	  $list[$key]=$listvalue;
	  $list[$key]['Version4']= 2019;
	 }
       print_r($list);

Result

 
array( 
            0 => array (
               "Version1" => 2016,
               "Version2" => 2017,	
               "Version3" => 2018,
               "Version4" => 2019
          
              
            ),
            
            1 => array (
               "Version1" => 2016,
               "Version2" => 2017,	
               "Version3" => 2018,
               "Version4" => 2019
            )
         );