1. Irsah inDesigns Blog
  2. Explore BlogrCart Content Carousel Examples

BlogrCart Content Carousel Examples

Learn how to AMP'd your blog with valid AMP HTML Blogger theme framework. Visit Blogr-AMP Theme and AMPaction Theme. No 3rd party application. Compatible with published posts. Quick in search & on any devices.
Below are more examples on BlogrCart Blogger Content Carousel BlogrCart CC -- The last (hopefully) blog content carousel, slider & gallery for your blog(s) on Blogger platform.

For the past 6 years, this responsive content carousel & slider have been used with BlogrCart themes which users can download for free from our Blogger theme file repository here. Now we have develop a custom widget which users can install with ease on any blogs -- on any theme!

A one click installer Blogger widget, display blog contents featured posts with carousel features, unlimited option display -- fully manage able right from your blog widget.

  • Displays posts by recent published
  • Displays posts by random order
  • Displays posts by assigned Label
  • Optional to display post title & summary
  • Optional to display posts meta data -- author, date, label
  • Responsive mouse & touch swipe transitions
  • Horizontal & fading content transitions.
  • Responsive contents display.
  • Ability to display multiple carousel in a single page.
  • Drag & drop anywhere in Blogger Layout.
  • Customize content carousel/slider to your own preference.
  • Inherits current theme styling -- blends with existing blog layout.
  • [NEW] Displays posts from external blog(s) your own! 

BlogrCart Content Carousel Examples


#1 Dual Posts Display by Recent Published Posts


Take note only highlighted settings changes is required.


Example Content Carousel #1 Widget Settings.

// Blog Posts Feed Settings
var FEED1 = {
  label: false,
  random: false,
  maxResults: 10,
  maxFeed: 50,
  labels: true,
  date: true,
  author: true,
  title : true,
  summary: true,
  image: {
    width : 900,
    height : 675,
    defaults: 'https://4.bp.blogspot.com/-MowVHfLkoZU/VhgIRyPbIoI/AAAAAAAATtE/qHST4Q2YCCc/s1600/placeholder-image.jpg'
  },
  pluginUrl : 'https://cdn.staticaly.com/gh/BlogrCart/widget/7f09459f/blogger-feed.min.js',
};
// Post Slider Settings
var SLIDER1 = {
  onFadeIn : 'slow',
  fade: false,
  slidesToShow: 2,
  slidesToScroll: 1,
  speed: 400,
  autoplaySpeed: 3000,
  dots: false,
  infinite: true,
  cssEase: 'linear',
  //centerMode: true,
  autoplay: true,
  nextArrow: '<button class="slick-arrow slick-next">Next</button>',
  prevArrow: '<button class="slick-arrow slick-prev">Prev</button>',
  responsive: [{
    breakpoint: 768,
    settings: {
      centerMode: false,
      slidesToShow: 1,
      slidesToScoll: 1,
    }
  }],
  jQueryUrl : 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',
  jsUrl : https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.min.js',
  cssUrl : 'https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.css',
};


#2 Single Posts Display with Fade Effect


Take note only highlighted settings changes is required.


Example Content Slider #2 Widget Settings. 

// Blog Posts Feed Settings
var FEED2 = {
  label: false,
  random: false,
  maxResults :5,
  maxFeed: 150,
  labels: true,
  date: true,
  author: true,
  title : true,
  summary: true,
  image: {
    width : 900,
    height : 675,
    defaults: 'https://4.bp.blogspot.com/-MowVHfLkoZU/VhgIRyPbIoI/AAAAAAAATtE/qHST4Q2YCCc/s1600/placeholder-image.jpg'
  },
  pluginUrl : 'https://cdn.staticaly.com/gh/BlogrCart/widget/7f09459f/blogger-feed.min.js',
};
// Post Slider Settings
var SLIDER2 = {
  onFadeIn : 'slow',
  fade: true,
  slidesToShow: 2,
  slidesToScroll: 1,
  speed: 400,
  autoplaySpeed: 3000,
  dots: false,
  infinite: true,
  cssEase: 'linear',
  //centerMode: true,
  autoplay: true,
  nextArrow: '<button class="slick-arrow slick-next">Next</button>',
  prevArrow: '<button class="slick-arrow slick-prev">Prev</button>',
  responsive: [{
    breakpoint: 768,
    settings: {
      centerMode: false,
      slidesToShow: 1,
      slidesToScoll: 1,
    }
  }],
  jQueryUrl : 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',
  jsUrl : 'https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.min.js',
  cssUrl : 'https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.css',
};


#2 Multiple Posts Display with Posts Label


Take note only highlighted settings changes is required.


Example Content Slider #3 Widget Settings. 

// Blog Posts Feed Settings
var FEED3 = {
  label: 'Blogger-Theme',
  random: false,
  maxResults: 10,
  maxFeed: 150,
  labels: true,
  date: false,
  author: false,
  title : false,
  summary: false,
  image: {
    width : 640,
    height : 480,
    defaults: 'https://4.bp.blogspot.com/-MowVHfLkoZU/VhgIRyPbIoI/AAAAAAAATtE/qHST4Q2YCCc/s1600/placeholder-image.jpg'
  },
  pluginUrl : 'https://cdn.staticaly.com/gh/BlogrCart/widget/7f09459f/blogger-feed.min.js',
};
// Post Slider Settings
var SLIDER3 = {
  onFadeIn : 'slow',
  fade: false,
  slidesToShow: 4,
  slidesToScroll: 1,
  speed: 400,
  autoplaySpeed: 3000,
  dots: false,
  infinite: true,
  cssEase: 'linear',
  //centerMode: true,
  autoplay: true,
  nextArrow: '<button class="slick-arrow slick-next">Next</button>',
  prevArrow: '<button class="slick-arrow slick-prev">Prev</button>',
  responsive: [{
    breakpoint: 768,
    settings: {
      centerMode: false,
      slidesToShow: 1,
      slidesToScoll: 1,
    }
  }],
  jQueryUrl : 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',
  jsUrl : 'https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.min.js',
  cssUrl : 'https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.css',
};


#4 Blog Contents/Posts in Random Order by Posts Label


Take note only highlighted settings changes is required.


Example Content Slider #4 Widget Settings. 

// Blog Posts Feed Settings
var FEED4 = {
  label: false,
  random: true,
  maxResults :10,
  maxFeed: 50,
  labels: true,
  date: true,
  author: true,
  title : true,
  summary: true,
  image: {
    width : 900,
    height : 675,
    defaults: 'https://4.bp.blogspot.com/-MowVHfLkoZU/VhgIRyPbIoI/AAAAAAAATtE/qHST4Q2YCCc/s1600/placeholder-image.jpg'
  },
  pluginUrl : 'https://cdn.staticaly.com/gh/BlogrCart/widget/7f09459f/blogger-feed.min.js',
};
// Post Slider Settings
var SLIDER4 = {
  onFadeIn : 'slow',
  fade: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  speed: 400,
  autoplaySpeed: 3000,
  dots: false,
  infinite: true,
  cssEase: 'linear',
  //centerMode: true,
  autoplay: true,
  nextArrow: '<button class="slick-arrow slick-next">Next</button>',
  prevArrow: '<button class="slick-arrow slick-prev">Prev</button>',
  responsive: [{
    breakpoint: 768,
    settings: {
      centerMode: false,
      slidesToShow: 1,
      slidesToScoll: 1,
    }
  }],
  jQueryUrl : 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',
  jsUrl : 'https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.min.js',
  cssUrl : 'https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.css',
};


#5 [NEW] Blog Posts Contents from Other Blogger Feeds


Take note only highlighted settings changes is required.


Example Content Slider #5 Widget Settings. 

// Blog Posts Feed Settings
var FEED5 = {
  label: false,
  random: false,
  maxResults : 10,
  maxFeed: 50,
  labels: true,
  date: false,
  author: false,
  title : true,
  summary: false,
  image: true,
  pluginUrl : 'https://cdn.staticaly.com/gh/BlogrCart/widget/7f09459f/blogger-feed.min.js',
};
// Post Slider Settings
var SLIDER5 = {
  onFadeIn : 'slow',
  fade: false,
  slidesToShow: 4,
  slidesToScroll: 2,
  speed: 400,
  autoplaySpeed: 3000,
  dots: false,
  infinite: true,
  cssEase: 'linear',
  centerMode: true,
  autoplay: true,
  nextArrow: '<button class="slick-arrow slick-next">Next</button>',
  prevArrow: '<button class="slick-arrow slick-prev">Prev</button>',,
  responsive: [{
    breakpoint: 768,
    settings: {
      centerMode: false,
      slidesToShow: 1,
      slidesToScoll: 1,
    }
  }],
  jQueryUrl : 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',
  jsUrl : 'https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.min.js',
  cssUrl : 'https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.css',
};


#6 Blog Posts Contents Only Without Image


Take note only highlighted settings changes is required.

Add custom styles to override default carousel styling.

<style> .feed-caption { position:static; } </style>


Example Content Slider #6 Widget Settings. 

// Blog Posts Feed Settings
var FEED6 = {
  label: false,
  random: false,
  maxResults : 10,
  maxFeed: 50,
  labels: true,
  date: true,
  author: true,
  title : true,
  summary: true,
  image: false,
  pluginUrl : 'https://cdn.staticaly.com/gh/BlogrCart/widget/7f09459f/blogger-feed.min.js',
};
// Post Slider Settings
var SLIDER5 = {
  onFadeIn : 'slow',
  fade: false,
  slidesToShow: 3,
  slidesToScroll: 1,
  speed: 400,
  autoplaySpeed: 3000,
  dots: false,
  infinite: true,
  cssEase: 'linear',
  centerMode: true,
  autoplay: true,
  nextArrow: '<button class="slick-arrow slick-next">Next</button>',
  prevArrow: '<button class="slick-arrow slick-prev">Prev</button>',,
  responsive: [{
    breakpoint: 768,
    settings: {
      centerMode: false,
      slidesToShow: 1,
      slidesToScoll: 1,
    }
  }],
  jQueryUrl : 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',
  jsUrl : 'https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.min.js',
  cssUrl : 'https://cdn.staticaly.com/gh/kenwheeler/slick/ee7d37fa/slick/slick.css',
};


BlogrCart Content Carousel widget documentation available here:

Install BlogrCart Content Carousel widget here:

Once installed, play around with your settings -- ideas are endless!


Special Thanks


This widget would not be available without below sources:-

slickjs
The last carousel you'll ever need by @KenWheeler

RawGit
Serves files quickly from Github repository using proper file format, a powerful Content Delivery Network (CDN)

BlogrCart Feed Retriever
Vanilla javascript all in one Blogger content feed retriever & constructor


Troubleshooting & Custom Setup


You can contact us by using our Contact page here Please provide your name, blog URL, and a detail description of your issues -- our Theme designers & developer team may not entertain if failure to do so.

If you need custom setup, removing attribution, custom pop up styling & effects --you can also use our Contact page to get in touch with us.

This software/application is provided as-is with no warranty -- developer/author/designers will not be reliable for any loss whatsoever.

What do you think? Do you have any feedback or additional functions that needs to be included with Blogger content slider gallery gadget? Add your questions & comments below...

New shopping cart widget for Blogger blogs -- transform your blog & sell products using your blog posts instantly! Visit Add Shopping Cart Widget Page to learn more.

Get In Touch