Dev {Tricks}

  • Home
  • WordPress
  • OJS
  • Oxwall
  • Server and Hosting
You are here: Home / Archives for jQuery Plugins / BX Slider

August 18, 2019 by dev Leave a Comment

How to add Bx Slider or Bx Carousel Slider to your website

Easy simple three steps.

Step One

Add following markup where you want to show the slider or carousel

<div class="dev-bdhostit">
	<div><img src="photo1.jpg"></div>
	<div><img src="photo2.jpg"></div>
	<div><img src="photo3.jpg"></div>
	<div><img src="photo7.jpg"></div>
	<div><img src="photo4.jpg"></div>
	<div><img src="photo5.jpg"></div>
	<div><img src="photo6.jpg"></div>
	<div><img src="photo8.jpg"></div>
	<div><img src="photo9.jpg"></div>
</div>

Step Two

Link jquery script of Bx Slider.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>

<script type="text/javascript">

$('.dev-bdhostit').bxSlider({
  auto: true,
  autoControls: true,
  stopAutoOnClick: true,
  minSlides: 1,
			  maxSlides: 8,
			  moveSlides: 1,
			  slideWidth: 250,
			  slideMargin: 10,
});

</script>

Add the above line before closing of </body> tag.

Step Three

Link css script of Bx Slider.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />

Add the above line before closing of </head> tag.

Filed Under: BX Slider, How to Tagged With: bx carousel, bx slider, bxcarousel, bxslider, bxslider jquery, carousel, carousel slider, carouser, html slider, jquery slider, php slider, slider, slider carousel

  • Upwork
  • Freelancer
  • Fiverr

Recent Posts

  • How to install phpBB
  • Missing vmail Folders .Sent, .Trash, .Drafts, .Junk, and Other
  • How to Add and Remove Swap Space on Ubuntu 20.04
  • Xauthority does not exist
  • How to Zip and Unzip Files and Directories in Linux
  • Usage stats shows 0 in the downloaded files
  • UTF-8 Encoding Debugging Chart
  • Dimensions Badge integration on OJS
  • PHP Fatal Error: Uncaught Error: Call to undefined function – OJS
  • Failed Ajax request or invalid JSON returned
  • Migrate Accounts from CWP to CWP
  • How to Install WordPress through webmin?
  • How to install webmin, usermin, virtualmin
  • How to change hostname and edit settings | Webmin
  • intoDNS
  • ISPConfig Installation Checklist on Ubuntu 20.04
  • How to get chain certificates
  • There are no readable files in this directory tree. Are safe mode or open_basedir active?
  • How to increase Apache TimeOut | CWP
  • Convert your old router to wifi repeater (Range Extender)

Categories

  • Affiliate Marketing (1)
  • Customization (2)
  • Email Solutions (18)
    • FrontApp (1)
    • Google Spreadsheet (2)
    • Microsoft Outlook (1)
    • PHP Email Form (3)
    • PolyMail (1)
    • Recaptcha (1)
    • Roundcube (3)
    • Thunderbird (2)
    • WebMail (4)
  • Games (1)
  • How to (67)
  • Joomla (6)
    • Akeeba (1)
    • Fix & Tricks (3)
  • jQuery (3)
  • jQuery Plugins (4)
    • BX Slider (1)
    • Slick (1)
  • Marketplace (5)
  • Miscellaneous (24)
  • OJS (48)
    • Help (32)
    • Installation (9)
      • Issues (5)
    • Plugins (6)
    • Theme (5)
      • Templates (5)
        • Frontend (4)
        • legacy (1)
    • Theme Customization (8)
    • Theme Development (12)
    • TPL CSS JS (2)
    • Upgrade (11)
  • Oxwall (3)
  • Payment Methods (1)
    • Paypal (1)
  • PC Tips and Tricks (11)
    • MS Office (1)
      • PowerPoint (1)
    • Windows (2)
  • PHP Parse error (2)
  • phpBB (1)
  • Server and Hosting (155)
    • Billing and Management (10)
      • Blesta (5)
      • Boxbilling (2)
      • WHMCS (5)
    • Email (9)
      • Postfix (3)
    • Error and Fix (16)
    • FTP (2)
    • MySQL (8)
    • Providers (50)
      • AWS (20)
      • Bluehost (19)
      • Cloudcone (8)
      • Contabo (22)
      • Digitalocean (50)
      • HostGator (18)
      • VPSDime (20)
    • Security (17)
      • SSH (6)
    • VPS Management (54)
    • Web Control Panel (114)
      • CentOS Web Panel (30)
      • cPanel (20)
      • DirectAdmin (85)
        • Find & fix (38)
      • ISPConfig (5)
      • Plesk (14)
      • Webmin (16)
        • Usermin (2)
        • Virtualmin (11)
      • WHM (11)
  • Uncategorized (12)
  • Wordpress (85)
    • Elementor (1)
    • Find and Fix (9)
    • Functions (5)
    • Genesis (9)
    • Glossary (1)
    • How to (20)
    • Neuron TD (15)
      • Console Error (1)
      • functions (5)
        • register_post_type (1)
        • register_sidebar (1)
        • theme_files (1)
        • theme_supports (1)
      • Image Directory (1)
      • Menu (2)
      • Query (4)
    • Plugins (12)
      • Contact Form 7 (5)
      • Duplicator (1)
      • Essential Grid (2)
    • Softaculous (3)
    • Speed and Security (4)
    • Stock Theme Development (6)
      • Header Footer (1)
      • PHP (1)
      • VC (1)
    • Theme Development (2)
      • Issues (1)
      • Menu (1)
    • Timer Theme Development (3)
    • Update (2)
    • Woocommerce (2)
    • WP Basic Guideline (8)

Important DEV links

  • Premium Themes
    • Themeforest
    • Envato Market
  • Built With (What Theme is That?)
    • What WP theme is that
    • Joomla Template Detector
    • Drupal Template Detector
    • Prestashop Template Detector
    • Shopify Theme Detector
    • Squarespace Template Detector
    • OpenCart Detector
    • WordPress.com Theme Detector
  • Domain/IP history checker
    • Who IS request
    • Hosting Info
  • Check DNS Propagation
    • DNS Checker
    • intoDNS
  • What is my IP
    • What is My IP Address
    • What is My IP
    • IP location
    • What is My IP
    • Porkbun
  • SEO Tools
    • Visitor Traffic
  • Photo Image
    • Remove Background 50 Free Preview Image 375 × 666 per month
  • Domain Registrars
    • 123-Reg
    • Porkbun
    • Freenom
    • Namecheap NEWCOM598
  • Hosting Providers
    • Bluehost
    • Hostgator
    • Inmotion
  • Hosting Control Panel
    • CWPpro (FREE)
    • DirectAdmin (Trial 60 Days, One account $2/month)
    • ISPConfig (Free)

 

 

  • Home
  • WordPress
  • OJS
  • Oxwall
  • Server and Hosting

Copyright © 2022 · Executive Pro Theme on Genesis Framework · WordPress · Log in