Create Image Slider
Then, we only made use of HTML and CSS. Is the speed of your website bothering you? It won't cause your website to load slower, so don't worry.
You shouldn't be concerned either because the Accordion Section also has CSS in dark mode. To tweak the dark mode class we provided to your theme, simply make the necessary changes. If you carefully follow this instruction, you can achieve this.
Step 1: First of all Login to your Blogger Dashboard
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code ]]></b:skin> or /*]]>*</style> and paste the following CSS Codes just above to it. Or you can paste it above <head/> tag by adding <style></style>
/*gallery img scroll by Ͳҽçհ ȺҍժմӀӀąհ*/
.galWrp{margin:25px 0;overflow-y:hidden;overflow-x:scroll;position:relative;white-space:nowrap;width:100%}.galWrp>*{display:inline-block;margin-right:5px}.galWrp>*:last-child{margin-right:0}.galWrp img{max-height:310px;max-width:unset;width:auto;border:1px solid #585759;}.galWrp.h250 img{max-height:250px}.galWrp.h200 img{max-height:200px}.galWrp.h150 img{max-height:150px}@media screen and (max-width:500px){.galWrp img{max-height:250px}} Step 6: Save or Publish the html changes by clicking on this icon
How to use it?
Step 7: Then go to the post/page
Step 8: Then if you are doing this in page/post then In post editor view, click icon at the bottom right of the title.Two options will appear: HTML view and Writing view, Select ' HTML View. Step 8: Now paste the following HTML code to that place
<!--[ Scroll Image Type 1]-->
<div class="galWrp">
<img alt="lightbox image without caption" src="#"/>
<img class="c" alt="image lightbox with caption" src="#"/>
<img class="c sz" alt="lightbox by resizing the image" src="#"/>
<img class="c sz n" alt="image without lightbox" src="#"/>
<img class="c sz" alt="image_title" src="#"/>
</div>
Step 9: Then Save or Publish.
Important Information
<img src="#" alt="#" />
In the image code shown in Step 8, you will change the src link ( src="#") with the link address of the image. How to do this is discussed below.
lightbox image without caption image lightbox with caption lightbox by resizing the image image without lightbox image_title
To appreciate our works, consider keeping the credits in codes. We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken.
