# post-carousel/4.0.8/src/blocks/news-ticker/SlideButton.js

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News, version 4.0.8. 71 lines.

- Page: https://pluginprobe.com/plugins/post-carousel/4.0.8/code/src/blocks/news-ticker/SlideButton.js
- Raw: https://pluginprobe.com/plugins/post-carousel/4.0.8/raw/src/blocks/news-ticker/SlideButton.js
- Modified: 2026-09-02T10:51:28+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/post-carousel/4.0.8/code/src/blocks/news-ticker/SlideButton.js#L10-L20`.

```javascript
import { usePanelBodyContext } from "../../context";
import { arrowIcons } from "../../controls/constants";
import { isEditor } from "../../controls/controls";
import { Pause } from "../../icons/icons";

export const SlideButton = ({
	props = {
		dynamicClassNames: "",
		navArrowVisibilityOnHover: false,
	},
	tickerPause,
	tickerDivider,
	HeadingPosition,

	style,
	swiperNavNextRef = null,
	swiperNavPrevRef = null,
	newsTickerCarouselArrowColor,
}) => {
	const { navArrowVisibilityOnHover } = props;
	const { togglePanelBody } = usePanelBodyContext();
	const editPage = isEditor();

	const NavIcon = arrowIcons[style];

	return (
		<>
			<div
				className={`sp-smart-post-swiper-nav-arrow ${navArrowVisibilityOnHover ? " visible-on-hover" : ""}`}
				onClick={(e) => (editPage ? togglePanelBody("navigation", e) : null)}
			>
				{tickerDivider && HeadingPosition === "left" ? (
					<span className="sp-smart-post-swiper-nav-arrow-btn" style={{ fontSize: "30px", zIndex: 2 }}>
						<span className="divider"> | </span>
					</span>
				) : null}

				<span
					ref={swiperNavPrevRef}
					className={`sp-smart-post-swiper-nav-arrow-btn btn-prev `}
					style={{ position: "static", margin: "1px" }}
				>
					<i>
						<NavIcon />
					</i>
				</span>
				{tickerPause && (
					<span className="sp-smart-post-swiper-nav-arrow-btn" style={{ position: "static" }}>
						<i className="sp-icon-pause">
							<Pause fillColor={newsTickerCarouselArrowColor?.color} />
						</i>
					</span>
				)}

				<span
					ref={swiperNavNextRef}
					className={`sp-smart-post-swiper-nav-arrow-btn btn-next`}
					style={{ position: "static", margin: "1px" }}
				>
					<i>
						<NavIcon />
					</i>
				</span>
				{tickerDivider && HeadingPosition === "right" ? (
					<span style={{ fontSize: "30px", zIndex: 2 }}>|</span>
				) : null}
			</div>
		</>
	);
};

```