Left Right Panels Carousel

Description

carousel with left – right panels, left panel has color background, text, button, right panel has image, carousel has navigation buttons, arrows
view demo – password: abc
buy me a coffee

1. Install Code

#1.1. First add Section > Choose Team > Choose Section with (i) icon

#1.2. Hover on top right of section > Click EDIT CONTENT

#1.3. at Design > Choose Carousel

#1.4. at Elements > You can Enable Image or Image, Title, Body, Button, anything what you want.

#1.5. at Content > Add your desired title, image, button url

#1.6. Hover on top right of Carousel Section > Click EDIT SECTION > at Format > Anchor Link, enter word: left-right-carousel

#1.7. Hover on Page where you use Carousel > Click Gear icon

#1.8. Click Advanced > Paste this code

If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 08.26c07v2 Left Right Panels Carousel -->
<script>
window.NaughtyCarouselConfig = {
  selector: 'section[id*="left-right-carousel"]',
  autoplay: true,
  autoplayDelay: 6000,
  pauseOnHover: true,
  transitionDuration: 1100,
  imageZoom: 1.12,
  stageHeight: '600px',
  imageWidth: 1500,
  itemClickable: false,
  showButton: true,
  loop: true,
  removeOriginal: false,
  backgroundColors: ['#F0562B', '#1C1C22', '#2E5A46', '#3A3A82', '#B23A48', '#1F6E8C', '#C6551F', '#4A3F6B'],
  overlayColor: '',
  panelPadding: '',
  sidePadding: '',
  spaceTitleDesc: '',
  spaceDescButton: '',
  controlsMarginTop: '1.5rem',
  arrowCircleColor: '#1C1C22',
  arrowColor: '#FFFFFF',
  arrowCircleSize: '44px',
  arrowIconSize: '15px',
  dotColor: '#fff',
  titleColor: '',
  descriptionColor: '',
  buttonBackground: '',
  buttonColor: '',
  buttonBorderColor: '',
  buttonHoverBackground: '',
  buttonHoverColor: '',
  stripFirstDescLine: false
};
</script>
<script src="https://code.beaverhero.com/listcarousel/0826c07v2leftrightpanelcarousel.js"></script>

#2. Customize

#2.1. To disable autoscroll, change line 05, line 06

autoplay: true,
autoplayDelay: 6000,

autoplay: false,
autoplayDelay: 6000,

#2.2. To change scale ratio of image on slide, change this line 09

imageZoom: 1.12,

#2.3. To change carousel height, change line 10

stageHeight: '600px',

#2.4. To change background color of left panels, you can change line 16

Left-to-right order corresponds to color item 1, item 2, item 3…

backgroundColors: ['#F0562B', '#1C1C22', '#2E5A46', '#3A3A82', '#B23A48', '#1F6E8C', '#C6551F', '#4A3F6B'],

#2.5. To change arrow style, change these line 23 to line 26

arrowCircleColor: '#1C1C22',
  arrowColor: '#FFFFFF',
  arrowCircleSize: '44px',
  arrowIconSize: '15px',

#2.6. To change dot navigation color, change line 27

dotColor: '#fff',

#2.7. If you have more style need to tweak, message/email me, I will update to guide.

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit current page (page where you use Carousel) > Add a Block > Choose Markdown

Add this code into Markdown

<script>
window.NaughtyCarouselConfig = {
  selector: 'section[id*="left-right-carousel"]',
  autoplay: true,
  autoplayDelay: 6000,
  pauseOnHover: true,
  transitionDuration: 1100,
  imageZoom: 1.12,
  stageHeight: '600px',
  imageWidth: 1500,
  itemClickable: false,
  showButton: true,
  loop: true,
  removeOriginal: false,
  backgroundColors: ['#F0562B', '#1C1C22', '#2E5A46', '#3A3A82', '#B23A48', '#1F6E8C', '#C6551F', '#4A3F6B'],
  overlayColor: '',
  panelPadding: '',
  sidePadding: '',
  spaceTitleDesc: '',
  spaceDescButton: '',
  controlsMarginTop: '1.5rem',
  arrowCircleColor: '#1C1C22',
  arrowColor: '#FFFFFF',
  arrowCircleSize: '44px',
  arrowIconSize: '15px',
  dotColor: '#fff',
  titleColor: '',
  descriptionColor: '',
  buttonBackground: '',
  buttonColor: '',
  buttonBorderColor: '',
  buttonHoverBackground: '',
  buttonHoverColor: '',
  stripFirstDescLine: false
};
</script>
<script src="https://code.beaverhero.com/listcarousel/0826c07v2leftrightpanelcarousel.js"></script>