Left Right Panels Carousel (v2)

Description

• (update version with some tweaks) 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 Simple List

#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(v2) Left Right Panels Carousel v2 -->
<style>
.pnc-desc{ overflow-y: visible;}@media screen and (min-width:768px){.pnc-panel-inner .pnc-text{justify-content:flex-start}.pnc-panel-inner .pnc-title{margin-bottom:auto!important}.pnc-panel-inner .pnc-desc{margin-top:auto!important;margin-bottom:auto!important;overflow-y:visible}.pnc-panel-inner .pnc-cta{margin-top:auto!important}}
</style>
<script>
window.NaughtyCarouselConfig = {
  selector: 'section[id*="left-right-carousel"]',
  autoplay: false,
  autoplayDelay: 6000,
  pauseOnHover: true,
  transitionDuration: 1100,
  imageZoom: 1.12,
  stageHeight: '440px',
  imageWidth: 1500,
  itemClickable: false,
  showButton: true,
  loop: true,
  removeOriginal: false,
  backgroundColors: ['#da0766', '#e0d100'],
  overlayColor: '',
  panelPadding: '25px',
  sidePadding: '',
  spaceTitleDesc: '',
  spaceDescButton: '',
  controlsMarginTop: '1.5rem',
  arrowCircleColor: '#1C1C22',
  arrowColor: '#FFFFFF',
  arrowCircleSize: '24px',
  arrowIconSize: '15px',
  dotColor: '#000',
  titleColor: '#fff',
  descriptionColor: '#fff',
  buttonBackground: '#000',
  buttonColor: '#fff',
  buttonBorderColor: '#000',
  buttonHoverBackground: '',
  buttonHoverColor: '',
  stripFirstDescLine: false,
  descriptionParagraphClass: 'sqsrte-large'
};
</script>
<script src="https://code.beaverhero.com/listsimple/0826c07v2v2leftrightpanelscarouselv2.js"></script>

#2. Customize

#2.1. To enable autoscroll, change line 08, 09

• true = enable
• false = disable

autoplay: false,
  autoplayDelay: 6000,

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

imageZoom: 1.12,

#2.3. To change carousel height, change line 13

stageHeight: '440px',

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

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

backgroundColors: ['#da0766', '#e0d100'],

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

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

#2.6. To change dot navigation style, change line 30

dotColor: '#000',

to change dot size, use this code to Custom CSS box

button.pnc-dot {
    width: 30px;
    height: 30px;
}

#2.7. To change title, description, button style, change line 31 to 37

titleColor: '#fff',
  descriptionColor: '#fff',
  buttonBackground: '#000',
  buttonColor: '#fff',
  buttonBorderColor: '#000',
  buttonHoverBackground: '',
  buttonHoverColor: '',

#2.8. To change this padding

You can change this option (line 21)

panelPadding: '25px',

#2.9. To change size of Title, Description, Button

• Title: inherit H2 size
• Description: inherit P3 size
• Button: inherit Body size

To change these to custom size, you can use this to Custom CSS

/* title */
h2.list-item-content__title.pnc-title {
    font-size: 30px !important;
}
/* description */
.pnc-desc p {
    font-size: 16px !important;
}
/* button */
a.pnc-cta.pnc-focusable {
    font-size: 12px !important;
}

#2.10. To change space between Arrows/Dots Navigation – Carousel, change line 25

controlsMarginTop: '1.5rem',

#2.11. If you need to tweak more you can email/message me or use this AI Assistant (designed for Squarespace sites)

#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 Simple List) > Add a Block > Choose Markdown

Add this code into Markdown

<style>
.pnc-desc{ overflow-y: visible;}@media screen and (min-width:768px){.pnc-panel-inner .pnc-text{justify-content:flex-start}.pnc-panel-inner .pnc-title{margin-bottom:auto!important}.pnc-panel-inner .pnc-desc{margin-top:auto!important;margin-bottom:auto!important;overflow-y:visible}.pnc-panel-inner .pnc-cta{margin-top:auto!important}}
</style>
<script>
window.NaughtyCarouselConfig = {
  selector: 'section[id*="left-right-carousel"]',
  autoplay: false,
  autoplayDelay: 6000,
  pauseOnHover: true,
  transitionDuration: 1100,
  imageZoom: 1.12,
  stageHeight: '440px',
  imageWidth: 1500,
  itemClickable: false,
  showButton: true,
  loop: true,
  removeOriginal: false,
  backgroundColors: ['#da0766', '#e0d100'],
  overlayColor: '',
  panelPadding: '25px',
  sidePadding: '',
  spaceTitleDesc: '',
  spaceDescButton: '',
  controlsMarginTop: '1.5rem',
  arrowCircleColor: '#1C1C22',
  arrowColor: '#FFFFFF',
  arrowCircleSize: '24px',
  arrowIconSize: '15px',
  dotColor: '#000',
  titleColor: '#fff',
  descriptionColor: '#fff',
  buttonBackground: '#000',
  buttonColor: '#fff',
  buttonBorderColor: '#000',
  buttonHoverBackground: '',
  buttonHoverColor: '',
  stripFirstDescLine: false,
  descriptionParagraphClass: 'sqsrte-large'
};
</script>
<script src="https://code.beaverhero.com/listsimple/0826c07v2v2leftrightpanelscarouselv2.js"></script>