Slick Slider Example

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div  class="cs-multi-item-slider" >
    <div class="col-sm-3 col-xs-12">
        <img data-lazy="image1.jpg">
    </div> 
    <div class="col-sm-3 col-xs-12">
        <img data-lazy="image2.jpg">
    </div> 
    <div class="col-sm-3 col-xs-12">
        <img data-lazy="image3.jpg">
    </div> 
    <div class="col-sm-3 col-xs-12">
        <img data-lazy="image4.jpg">
    </div> 
    <div class="col-sm-3 col-xs-12">
        <img data-lazy="image5.jpg">
    </div>  
</div>

<script>

$(document).ready(function(){
        $('.cs-multi-item-slider').slick({
            dots: true,
            infinite: true,
            speed: 300,
            slidesToShow: 4,
            slidesToScroll: 1,
            lazyLoad: 'ondemand',
            autoplay: true,
            autoplaySpeed: 2000,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 4,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: true
                    }
                },
                {
                    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
            ]
        });
    });
    </script>

How to Add Multiple items per slide in bootstrap carousel

<div id="Carousel" class="carousel slide cs-carousal-items  cs-multi-item-carousel" data-ride="carousel" data-type="multi" data-interval="2000">
    <div class="carousel-inner" role="listbox">
        <div class="item active  " >
            <div class="col-sm-3 col-xs-12">
                <img src="image1.jpg">
            </div>  
        </div>
        <div class="item active  " >
            <div class="col-sm-3 col-xs-12">
                <img src="image2.jpg">
            </div>  
        </div>
        <div class="item active  " >
            <div class="col-sm-3 col-xs-12">
                <img src="image4.jpg">
            </div>  
        </div>
        <div class="item active  " >
            <div class="col-sm-3 col-xs-12">
                <img src="image5.jpg">
            </div>  
        </div>
    </div>
    <a class="left carousel-control" href="#Carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#Carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
<script type="text/javascript">
$('.cs-multi-item-carousel[data-type="multi"] .item').each(function() {
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
    var itemPerSlide =3;
    for (var i = 0; i < itemPerSlide; i++) {
        next = next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
    }
});
</script>

This page isn’t working Chrome detected unusual code on this page and blocked it to protect your personal information. ERR_BLOCKED_BY_XSS_AUDITOR

This page isn't working
Chrome detected unusual code on this page and blocked it to protect your personal information (for example, passwords, phone numbers, and credit cards).
ERR_BLOCKED_BY_XSS_AUDITOR




This page isn’t workingERR_BLOCKED_BY_XSS_AUDITOR

Mainly,

This error message is occurs when we are trying to post a content with HTML tags or Scripts Tags or Like When Google Chrome believes a “cross-site scripting” attack is happening. These attacks happen when a browser is tricked into rendering HTML or JavaScript that is not meant to be a part of the website being displayed.

Then Chrome Generates This ERROR ”
ERR_BLOCKED_BY_XSS_AUDITOR

For PHP and All Other PHP Frameworks: Add this below line before post

 header('X-XSS-Protection:0'); 

How to Set a Domain name for xampp server project like: example.com

If you want to give a domain name for your Xampp Project, YES! Here you Can do it easily… Just Follow the Below Steps-

Step-1:

Open Your XAMPP Folder, Where You Have Installed.

Then, Go to folder apache,

Then, Open Folder conf,

Then, Open Folder extra.

The Full Path is Like,

PATH::    C:\xampp\apache\conf\extra

Now, Open “httpd-vhosts.conf” in an Editor

FILE NAME:: httpd-vhosts.conf
open file named – httpd-vhosts.conf

Here, You can see the line of code, Like-


#Virtual Hosts
#
#Required modules: mod_log_config
#If you want to maintain multiple domains/hostnames on your
#machine you can setup VirtualHost containers for them. Most configurations
#use only name-based virtual hosts so the server doesn't need to worry about
#IP addresses. This is indicated by the asterisks in the directives below.
#
#Please see the documentation at

#for further details before you try to setup virtual hosts.
#
#You may use the command line option '-S' to verify your virtual host
configuration.
#Use name-based virtual hosting.

#NameVirtualHost *:80
#VirtualHost example:
#Almost any Apache directive may go into a VirtualHost container.
#The first VirtualHost section is used for all requests that do not
#match a ##ServerName or ##ServerAlias in any block.
#

##ServerAdmin [email protected]
##DocumentRoot "C:/xampp/htdocs/dummy-host.example.com"
##ServerName dummy-host.example.com
##ServerAlias www.dummy-host.example.com
##ErrorLog "logs/dummy-host.example.com-error.log"
##CustomLog "logs/dummy-host.example.com-access.log" common


##ServerAdmin [email protected]
##DocumentRoot "C:/xampp/htdocs/dummy-host2.example.com"
##ServerName dummy-host2.example.com
##ErrorLog "logs/dummy-host2.example.com-error.log"
##CustomLog "logs/dummy-host2.example.com-access.log" common


Here, at the End of file just add the below code. here example.com is your project domain name. You Can change it as you want..


ServerAdmin [email protected]
DocumentRoot "C:/xampp/htdocs/example.com"
ServerName example.com
ErrorLog "logs/example.com-error.log"
CustomLog "logs/example.com-access.log" common

Step-2:

Now, Open your C drive’s – Windows Folder,

Then, Open System32 Folder,

Then, Open drivers folder,

Then, Open etc folder,

Here, you can find many files. From here Open “hosts” file in an Editor.

PATH::    C:\Windows\System32\drivers\etc
FILE NAME:: hosts

The hosts file content look like – 

Copyright (c) 1993-2009 Microsoft Corp.
#This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
# This file contains the mappings of IP addresses to host names.
#Each entry should be kept on an individual line.
#The IP address should be placed in the first column followed by the corresponding host name.
#The IP address and the host name should be separated by at least one
space.
#Additionally, comments (such as these) may be inserted on individual
lines or following the machine name denoted by a '#' symbol.

#For example:
#102.54.94.97 rhino.acme.com # source server
#38.25.63.10 x.acme.com # x client host

#localhost name resolution is handled within DNS itself.
#127.0.0.1 localhost
#::1 localhost

# Newly Added Project Domain
127.0.0.1 example.com

Here, you can see newly added domain. It is the project domain which we have created in xammp folder in Step-1


127.0.0.1 example.com

Now, Restart your xampp,

Now you can access the project using the domain name.

Now , Just type your given domain name or example.com, the project fill will open.

Finally Done. 

Please enter a valid value. The two nearest valid values are 499.999 and 500.999

 

When Typeing and Click its Showing for Number Field as

“Please enter a valid value. The two nearest valid values are 499.999 and 500.999”

 

And the Data Not Saving?

 

Solution:

Here, You need to use step=”any” as an attribute when working with type=”number” input fields.

Like:

 

<form>
        <input step="any" type="number" name="price" maxlength="5" value="" />
</form>