CODEWITHSUNDEEP
javascriptjquerycsshtmlblogger
Rohmat
Rohmat

Reputation: 71

How to insert JavaScript Code in Blogger

Anyone can help me. I have problem with my blog.

I want to input slicky slider on homepage blogger. I have script fromm codepen : https://codepen.io/jamy/pen/gbdWGJ

my question is, how to input this script on blogger template. 

var flkty = new Flickity( '.main-gallery', {
  cellAlign: 'left',
  contain: true,
  wrapAround: true,
  prevNextButtons: false,
  autoPlay: 5000
});

I try same option but always failed. thx

Upvotes: 2

Views: 1746

Answers (2)

Rohmat
Rohmat

Reputation: 71

Thanks all for an answer. Finally, steep maybe like this:

  1. put this code external Flickity before the tag 
<script src='http://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.pkgd.min.js' type='text/javascript' />
  1. and Flickity function after or bellow ""
< script type = 'text/javascript' >
  //<![CDATA[
  var flkty = new Flickity('.main-gallery', {
    cellAlign: 'left',
    contain: true,
    wrapAround: true,
    prevNextButtons: false,
    autoPlay: 5000
  });
//]]>
<
/script>
  1. Finally step add the following CSS :
/* ---- page dots ---- */
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: 25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

Upvotes: 2

user6144987
user6144987

Reputation:

Your code use a Flickity function and you need to add external Flickity files in your template.

Put this in the head and before your code

<script src="http://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.pkgd.min.js"></script>

Upvotes: 0

Related Questions