Go to blogger dashboard and navigate to Theme.
STEP 2
STEP 2
If you are using old blogger interface(Legacy interface) then click on Edit Html.
Search for <head> and just below it paste the following code.
STEP 4
Click on save and note the ID of your gadget or give it a title so that you could find it easily for next steps.
But if you are using new blogger interface then click on dotted menu and click on Edit HTML.
STEP 3
Search for <head> and just below it paste the following code.
<link href='https://cdn.jsdelivr.net/gh/101Helper/mobile@master/swiper.css' rel='stylesheet'/>
<script src='https://cdn.jsdelivr.net/gh/101Helper/mobile@master/swiper.js'/>
<script src='https://cdn.jsdelivr.net/gh/101Helper/mobile@master/swiper.js'/>
Click on Save template.
STEP 5
STEP 5
Go to Layout, click on add a gadget and open Html/Javascript.
STEP 6
Copy code of desired swiper from below and paste it into Html/Javascript.
STEP 6
Copy code of desired swiper from below and paste it into Html/Javascript.
Click on save and note the ID of your gadget or give it a title so that you could find it easily for next steps.
STEP 7
Go to template and find the swiper gadget which you just added by its ID or by its Title.
STEP 8
After finding the swiper gadget in your template, you will see a line of code like this:
<b:widget id='HTML1' locked='false' title='Swiper' type='HTML' visible='true'>
You need to add mobile='yes' after locked='false' like this:
<b:widget id='HTML1' locked='false' mobile='yes' title='Swiper' type='HTML' visible='true'>
Click on save and you are done, now you just need to enable mobile custom template for your blog and swiper will start showing up in your phone.
STEP 10
STEP 8
After finding the swiper gadget in your template, you will see a line of code like this:
<b:widget id='HTML1' locked='false' title='Swiper' type='HTML' visible='true'>
You need to add mobile='yes' after locked='false' like this:
<b:widget id='HTML1' locked='false' mobile='yes' title='Swiper' type='HTML' visible='true'>
STEP 9
Click on save and you are done, now you just need to enable mobile custom template for your blog and swiper will start showing up in your phone.
STEP 10
Go to template and click on settings icon below mobile template in old blogger interface i.e Legacy interface.
Choose Custom template for your mobile template and click on save button.
But if you are using new blogger interface then click on the dotted menu as shown in below image and click on Mobile Settings.
STEP 10
Choose Custom template for your mobile template and click on save button.
This is it. You are done. Visit your blogger mobile site by adding a suffix ?m=1 to see your swiper carousel widget live.
NOTE
If your swiper carousel widget is not working then follow Step 8 again after enabling mobile custom theme as shown in step 9 and 10.
If you have any questions or suggestions or the widget is not working for you then please leave a comment below to help us improve the widget. Thanks for visiting.
HOW TO CUSTOMIZE BLOGGER SWIPER CAROUSEL WIDGET?
Rate This Article
Thanks for reading: How to Install Swiper carousel Widget in Blogger Rexblog, Stay tune to get latest Blogging Tips.