diff --git a/src/components/ItemSlider.vue b/src/components/ItemSlider.vue
index 07738a75441cde23418d6d1720a88cddc6274e77..f85283f95c837009a28b6eebf8ad693455287b1a 100644
--- a/src/components/ItemSlider.vue
+++ b/src/components/ItemSlider.vue
@@ -29,7 +29,10 @@
 			<div
 				v-show="showPrev"
 				class="navSlider navPrev" />
-			<div id="slider" class="podcastSlider">
+			<div
+				id="slider"
+				class="podcastSlider"
+				:class="[showPrev ? '' : 'hideBefore', showNext ? '' : 'hideAfter']">
 				<div
 					v-for="(podcast, idx) in podcasts"
 					:key="idx"
@@ -123,7 +126,7 @@ export default {
 	}
 
 	.podcastSliderWrapper {
-		display: flex;
+		position: relative;
 	}
 
 	.podcastSlider {
@@ -137,25 +140,33 @@ export default {
 			content: '';
 			display: block;
 			position: absolute;
-			left: 30px;
+			left: 0px;
 			height: 220px;
 			width: 100px;
-			background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
+			background-image: linear-gradient(to right, white 0%, rgba(255,255,255,0) 100%);
 		}
 
 		&:after {
 			content: '';
 			display: block;
 			position: absolute;
-			right: 30px;
+			right: 0px;
 			height: 220px;
 			width: 100px;
 			background-image: linear-gradient(to left, white 0%, rgba(255,255,255,0) 100%);
 		}
 	}
 
+	.podcastSlider.hideBefore:before {
+		display: none;
+	}
+
+	.podcastSlider.hideAfter:after {
+		display: none;
+	}
+
 	.navSlider {
-		position: relative;
+		position: absolute;
 		top: 60px;
 		height: 100px;
 		width: 40px;
@@ -172,7 +183,7 @@ export default {
 	}
 
 	.navNext {
-		right: -25px;
+		right: -0px;
 		background-image: var(--icon-triangle-e-000);
 	}