> ## Content Index
> Fetch the complete content index at: https://gothru.co/docs/llms.txt
> Use this file to discover other available public pages before exploring further.

# How To Modify Carousel Plugin Using TourMkr Virtual Tour CSS Recipes Editor
- URL: https://gothru.co/docs/tourmkr-virtual-tour-css-recipes-editor/
- Published: 2021-03-25T15:35:27.000Z
- Updated: 2021-03-28T18:22:48.000Z
- Description: In this tutorial you are exploring the CSS Recipes Editor that works with GoThru`s new website https://recipes.tourmkr.com​ from where you can get ready made code to customize carousel plugins in your virtual tour.
- Author: Syafriko Yuliusman
- Tags: Carousel

In this tutorial you are exploring the CSS Recipes Editor that works with GoThru\`s new website[ https://recipes.tourmkr.com](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbGdiMTFIR3ZTMEVrWkM2TUJ2U21MWDhCSlhSQXxBQ3Jtc0ttWndoMFFWLXhuc3dXTURsdXZKNHZUWlR4OG8yVWtlb3dQMDZEOTVNNlhKdlpQVTAwVUtOOWRFeW5yb05CRnlfM3V1aTU1SjczdmZuMGJoLUljOHltYUVXWTR6RV9mV0ZpbFJZcE5QMExQcnloTmdNSQ&q=https%3A%2F%2Frecipes.tourmkr.com&ref=gothru.co)​ from where you can get ready made code to customize carousel plugins in your virtual tour.

To perform this operation, you can follow the steps below.

## Step 1: Set up the carousel 

1\. Go to Carousel Settings (**Plugin Manager > Carousel**) or via Active Plugin (**Active Plugins > Carousel**).

![](https://lh5.googleusercontent.com/ECTAQrS92XNHKtlUNU-qU0RbB4NiM06JWH7yfaZ8vGHQy8xiTDVxHVbFlDdo97_aqauW-t2UhOa5HYD6OcS7-iFHVURbzJCaqVNtIvoHelchLc7x8J2IYHDA1XkgMoPcXivIVi_H)

2\. Under the Carousel settings, go to the menu element to add panoramas to the Carousel.

![](https://lh4.googleusercontent.com/B74wNwBmdkMn7DAWO_3PaRG3bVJ2WuHTSNKFZ5nBJxm6RcZiH3HQQmgtOqkGb49iH6yMDZ0d2QRk8uVdhj_xVQkvbQ9H75CYRKzyUGDV9RtM0jVApvV4esLYwNAvXV5zEH67oLKC)

3\. Set the item border radius to 70 and background color to 0 transparent.

![](https://lh6.googleusercontent.com/yWroTRGICbk1TanqbPSUq8X4S0UM7OJ2-YKCxif5LPmZINiqfHvBygcjd0QvzbQTXgrIL9zhhvEPgsy6RNSWYsXCKHW0SR55wNz5vL8iNCV77eIexbWCyimaiXaMr1g8C0AuH4ME)

## Step 2 : Copy and paste the CSS code

1\. Locate the **Styles** section at the lower part of the carousel settings.

![](https://lh4.googleusercontent.com/LQFtnkfVSea6OYNBcU_IC4ZWgI1LE-5B0-3rQgb8I4WK0Icf2zQX5Pg4WrbX1q8E6SOYHCQ_aSqwwWe_udIPjjBa0H-eRPiXuViA9Ez8xkPJ4YHXmnDzPk4GMuzGbpUq6v8ESrYU)

2\. Copy and paste the following codes to the **Styles** section.

## Circle Carousel Images

Copy the CSS code to your Carousel Styles section:

```css
#overlay wdg-other-carousel{
--active-boder: 5px;
}
.img svg{
width: calc(var(--width) - var(--padding)*2 - var(--active-boder)*2) !important;
}
.slider>.item{
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
}
```

![](https://lh5.googleusercontent.com/wtEfrZaoDC5i9Z5sL-jV4OMys4y8mjTlTROzJLvu1CkdYULUbcDMSaVjLXgIuxgievudEx9F3CN3c7HPEYwgbQRS5_REMpGC_zvXozG5h00TI_Z4mbp_51kL7EiK5pIp37yJ41mf)

## Circle Left and Right buttons for Carousel Navigation

Copy the CSS code to your Carousel Styles section:

```css
.arrow-buttons button{
background: black;
opacity: 0.6;
color:  #ffd000;
height: 64px !important;
width: 64px !important;
top: 50% !important;
transform: translateY(-50%);
border-radius: 50% !important;
box-shadow: 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%), 0 11px 15px -7px rgb(0 0 0 / 20%);
}
.arrow-buttons button.next{
right: 1% !important;
}
.arrow-buttons button.prev{
left: 1% !important;
}
```

![](https://lh3.googleusercontent.com/O4S6nW-4YZk_nMsp4LoBm2FWG6A4AQPcLXRfANipwzyiDULyyj7C-R-6LRP-eQXJRkx075yjVkOdDbWIwhVvIsG1aL-VWj5JTKMOU03XQDVj27YIM8LWZ9QA7eH7onBvhdMxBfi1)

## Hide Carousel Left and Right Navigation on Phone and Tablet

Copy the CSS code to your Carousel Styles section:

```css
/* hide only on desktop */
#overlay.desktop wdg-other-carousel .arrow-buttons {
display: none !important;
}
/* hide only on tablet */
#overlay.tablet wdg-other-carousel .arrow-buttons {
display: none !important;
}
/* hide only on mobile */
#overlay.mobile wdg-other-carousel .arrow-buttons {
display: none !important;
}
/* hide on tablet and mobile */
#overlay.tablet wdg-other-carousel .arrow-buttons,
#overlay.mobile wdg-other-carousel .arrow-buttons {
display: none !important;
}
```

![](https://lh3.googleusercontent.com/nh2eGAMhjw_4nIbGrD8MMz_SwOHjShUUiRKWOOYhW9VS0_AV24g3C8KhsZ6ADwGDfwsHMwoSQaEpAq1c3BmGwKivXUhSiyh76mA89J243gQT_zvuqs2SEEwYYwTgkL4P5zIlBhVT)

## Half Circle Left and Right Buttons for Carousel Navigation

Copy the CSS code to your Carousel Styles section:

```css
.arrow-buttons button{
 background: black;
 opacity: 0.8;
 color:  #ffd000;
 height: 64px !important;
 width: 48px !important;
 min-width: 0;
 top: 50% !important;
 transform: translateY(-50%);
 border-radius: 32px;
 box-shadow: 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%), 0 11px 15px -7px rgb(0 0 0 / 20%);
}
.arrow-buttons button sh-icon{
 width: 30px !important;
 height: 30px !important;
}
```

![](https://gothru.co/docs/content/images/2021/03/2021-03-27_21-49-36.gif)

## Center Carousel thumbs when you don't have too many

Copy the CSS code to your Carousel Styles section:

```css
.slider{
 margin: auto;
}
```

![](https://gothru.co/docs/content/images/2021/03/2021-03-27_21-43-13.gif)

## Step 3: Save & Publish

Once you are happy with the setups, just click “save” and “publish” to see the results.

![](https://gothru.co/docs/content/images/2021/03/2021-02-13_10-46-05.jpg)

GoThru will always come with new features and ready made CSS code from [https://recipes.tourmkr.com​](about:blank) that allows you to customize other Overlay Editor plugins. So, stay tuned for more updates!

## Tutorial Video: